/* ------------------------------- */
/* ----- Defaults and Global ----- */
/* ------------------------------- */
/* Defaults */
:root {	--background: #f3f3f3; --a-text: rgba(0,0,0,0.8); --a-text-hover: rgba(0,0,0,0.5); }

/* Theme: Desert */
/*
:root {
	--header-background: #f3f3f3;
	--header-text: rgba(0,0,0,0.8);
	--header-btn-background: rgba(229,222,208,1);
	--nav-background: rgba(229,222,208,1);
	--button-background: rgba(229,222,208,0.8);
	--button-text: rgba(0,0,0,1);
}
*/

/* Theme: Woodland */
:root {
	--header-background: #626355;
	--header-text: rgba(255,255,255,0.8);
	--header-btn-background: #535447;		
	--nav-background: #535447;
	--button-background: #959b83;
	--button-text: rgba(255,255,255,1);
}
header .header-btn .icon { filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(282deg) brightness(105%) contrast(102%); }

@font-face { font-display: swap; font-family: Inter; font-style: normal; font-weight: 100 900; src: url(/font/inter.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
* { font-family: Inter, arial, sans-serif; }
html { background-color: var(--background); box-sizing: border-box; color: #000; font-size: 14px; line-height: 1.3; }
::selection { background-color: rgba(178, 183, 162, 0.75); color: #000; text-shadow: none; }
h1,h2,h3,h3 a,h4 { color: #36392f; color: rgba(0,0,0,0.8); font-weight: 300; line-height: 1; }
h1 { font-size: 24px; font-weight: 500; margin-bottom: 30px; text-align: center; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
h4 { font-size: 16px; margin-bottom: 20px; text-align: center; }
a,button.a { background: transparent; color: #7f422a; text-decoration: none; }
aside a, main a { text-decoration: underline; }
a:hover { color: var(--a-text-hover); }
a:focus { color: red; } /* accessability */
.hide { display: none; }
.show { display: block; }
strong, .strong { font-weight: 700; }
hr { background-color: rgba(0,0,0,0.1); height: 1px; margin: 20px 0; }
p { margin: 10px 0; }
.container { margin: auto; max-width: 1200px; }
.container.small { max-width: 600px; }
.row { display: flex; flex: 1 0 100%; flex-wrap: wrap; }
.row:has(.box) { gap: 40px; }
.column,aside,main { flex: 1 0 0%; }
.flex { display: flex; }
.flex.align-center { align-items: center; }
.flex-end { display: flex; justify-content: flex-end; margin-bottom: 20px; } /* used for top right buttons */
.text-left { text-align: left !important; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.box { background-color: #fff; border-radius: 4px; box-shadow: 0 2px 4px -1px rgba(51,51,51,0.1); margin-bottom: 40px; padding: 20px; }
.box.np { padding: 0; }
.box .header { border-bottom: 1px solid rgba(0,0,0,0.05); margin: -20px -20px 15px -20px; position: relative; }
.box.collapsible .header { margin: -20px -20px -20px -20px; }
.box .collapse { margin-top: 35px; transition: 0.1s all linear; }
.box .header h3 { color: rgba(0,0,0,0.8); display: block; font-weight: 500; margin: 15px 20px; }
.box .header h5 { color: rgba(0,0,0,0.8); display: block; font-size: 14px; font-weight: 500; margin: 15px 20px; }

#feedback, #modalfeedback { margin-top: 10px; text-align: center; }
.alert { margin: 20px; }
.bi { margin-right: 5px; }
.dropdown-item { font-size: 1rem; }
.dropdown-item:hover, .dropdown-item:focus { background-color: rgba(0,0,0,0.1); color: #16181b; }

/* Table */
.table { --bs-table-striped-color: #000; --bs-table-striped-bg: rgba(0, 0, 0, 0.025); background-color: #fff; }
.table.small { max-width: 500px; }
.table th { font-weight: 600; padding-bottom: 15px; padding-top: 15px; }
.table tr th:first-child, .table tr td:first-child { padding-left: 15px; }
.table tr th:last-child, .table tr td:last-child { padding-right: 15px; }
.table.text-center td { text-align: center; }
.table-striped th, .table-striped td { border: 0; }
.table thead tr.table-header { border-bottom: 1px solid #f2f2f2; }
.table thead tr.table-header th { font-weight: 700; padding: 15px 20px; }

/* List */
.list h2 { margin: 10px 0; }
.list li { list-style-position: inside; list-style-type: disc; margin: 0 10px 10px 10px; }
.list ul:not(:last-of-type) { margin-bottom: 40px; }
.list li.sub { list-style-type: circle; margin-left: 3em; }
.list sup { margin-left: 0.25em; }
.list sup a { font-style: italic; }

/* Avatar */
img.avatar { border-radius: 3px; display: block; margin: 10px auto; max-width: 140px; }
svg.avatar { border-radius: 3px; display: block; margin: 10px auto; max-width: 100px; }

/* -------------------------------- */
/* ----- Form and BS override ----- */
/* -------------------------------- */
/* Forms */
.h-captcha { margin-bottom: 20px; text-align: center; }
.column.small { font-weight: 600; margin-right: 10px; max-width: 200px; text-align: right; }
.form { align-items: center; padding: 0 20px 20px 20px; }

.red { color: #af2626 !important; font-weight: 600 !important; }
.green { color: green !important; font-weight: 600 !important; }
.black { color: #000 !important; }

label { color: #353c41; font-weight: 600; display: block; }
label.form-check-label { font-weight: 400; }
label span.optional { color: green; font-size: 0.75em; margin-left: 10px; /*vertical-align: text-top;*/ }
label span.required { color: #aa1414; font-size: 0.75em; margin-left: 10px; /*vertical-align: text-top;*/ }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.input-group input),select,textarea { appearance: none; border-radius: 4px; color: inherit; font-size: 14px; margin: 5px 0 0 0; padding: 8px !important; }
.input-group-text { margin: 5px 0 0 0; padding: 8px; }
input::placeholder,select::placeholder,textarea::placeholder { opacity: 0.5; }
input:hover,select:hover,textarea:hover { border-color: #8d99ab !important; }
input:focus,select:focus,textarea:focus { border-color: #3480bb !important; box-shadow: 0 0 0 4px rgba(23,119,171,0.3) !important; }
input:disabled,select:disabled,textarea:disabled { background: #e9ecef; font-weight: 300; }
input:disabled:hover,select:disabled:hover,textarea:disabled:hover { border-color: #c6ccd5 !important; cursor: not-allowed; }
textarea { resize: vertical; }
#charcount { color: rgba(0,0,0,0.9); display: block; font-size: 0.875em; margin: 5px 0 0 0; text-align: right; }
.input-group-text { margin-bottom: 0; margin-top: 0; padding-bottom: 8px; padding-top: 8px; }
.center-switch { display: inline-block; }
.register-type-label { margin-bottom: 5px; }

/* Buttons */
.btn-default { background: var(--button-background); color: var(--button-text); display: block; margin: auto; transition: all 0.2s ease; }
.btn-inline { display: inline !important; }
.btn-clear { background: transparent !important; color: rgba(0,0,0,0.8) !important; }
.btn-clear:hover, .btn-clear:focus { background: transparent !important; }
.btn:not(.btn-group .btn):hover { opacity: 0.6; }
.btn:disabled,button:disabled { cursor: not-allowed; pointer-events: auto; }
.btn.small { padding: 2px 8px !important; }
a.btn { display: inline-block !important; }
button.btn-collapse { background: transparent; color: #36392f; font-size: 24px; position: absolute; text-align: right; top: -7px; width: 100%; z-index: 100; }
.center-buttons { display: flex; justify-content: space-evenly; } /* create preview */
.center-buttons button { display: inline !important; } /* create preview */

/* BS: btn-group */
.btn-check + .btn { border-color: rgba(0,0,0,0.2) !important; color: #6c757d; }
.btn-check:hover + .btn { background-color: var(--button-background); opacity: 0.6; }
.btn-check:checked + .btn, .btn-check:active + .btn { background-color: var(--button-background); color: var(--button-text); }

/* BS: modal */
.modal-content { border: 0; box-shadow: 0 5px 55px rgba(51,51,51,0.4), 0 7px 24px -12px rgba(51,51,51,0.7); }
.modal-header { border-color: rgba(0,0,0,0.05); }
.modal-footer { border: 0; }
.modal h5 { color: #000; font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0; overflow: hidden; padding: 0; text-align: left; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------ */
/* ----- Header ----- */
/* ------------------ */
header { background: var(--header-background); color: #000; display: block; font-weight: 700; position: relative; }
header .container { align-items: center; display: flex; height: 90px; }
header .logo a { background: transparent url('/img/logo.png') no-repeat; display: block; height: 70px; margin-right: 5px; min-width: 100px; opacity: 0.9; transition: all 0.2s ease; }
header .logo a:hover { filter: contrast(120%); opacity: 1; }
header .title { color: var(--header-text); }
header .title a { color: var(--header-text); text-decoration: underline; }
header .title div { font-size: 26px; font-weight: 300; }
header .user-menu { text-align: right; width: 100%; }
header .header-btn { background-color: var(--header-btn-background); border-radius: 3px !important; color: var(--header-text); font-size: 13px; margin: 0 5px; min-height: 40px; padding: 12px 15px; transition: all 0.2s ease; }
header .header-btn:hover, header .header-btn:focus { box-shadow: none !important; color: var(--header-text); opacity: 0.6; }
header .header-btn .badge { color: #959b83; margin-left: 5px; vertical-align: text-top !important; }
header .header-btn:hover .badge { color: #fff; }
header .header-btn svg.plus { margin: -2px 4px 0 0; max-width: 12px; }
header .header-btn .bi { margin: 0; padding: 0; }
/*header .header-btn .bi-exclamation-triangle-fill { font-size: 1.2em; vertical-align: -.1em;}
header .header-btn .bi-envelope-fill { font-size: 1.3em; vertical-align: -.15em; }*/
header .header-btn .unread { background-color: #dc3545; color: #fff !important; font-weight: 700; }
/*header .header-btn.btn-create { background: #d1e7dd !important; }*/
header .btn-group .header-btn { padding: 0 15px; transition: all 0.2s ease; }
header .btn-group .avatar { border-radius: 2px; height: 25px; margin: 0 5px 0 0; width: 25px; }
header .btn-group .btn { display: flex; align-items: center; }
header .btn-group .dropdown-item { border: 0; color: #212529; font-size: 14px; font-weight: 400; letter-spacing: 0; padding: 0.25rem 1rem; text-shadow: none; text-transform: capitalize; transition: all 0s; } /* overrides previous a style */
header .btn-group .bi-power { color: red; }
header .inline { display: inline; }

#navigation { background-color: var(--nav-background); padding: 15px; text-align: center; }
#navigation a { color: var(--header-text); font-size: 15px; font-weight: 400; letter-spacing: 1.2px; margin: 25px; text-transform: uppercase; transition: all 0.2s ease; }
#navigation a:hover { opacity: 0.5; }

#breadcrumb { background-color: #fff; box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.05); margin-bottom: 40px; padding: 15px; }
#breadcrumb li { display: inline; }
#breadcrumb li + li::before { content: "/"; display: inline-block; opacity: 0.6; padding: 0 10px; }

/* ---------------- */
/* ----- Side ----- */
/* ---------------- */
aside { margin-right: 40px; max-width: 260px; }
aside h3 { color: rgba(0,0,0,0.8); margin-bottom: 15px; }
aside li a { color: rgba(0,0,0,0.8); display: block; font-weight: 500; margin: 5px 0; padding: 2px 0; text-decoration: none; }
aside li:first-of-type a { margin-top: 0; }
aside li.active a { font-weight: 700; }
aside .name { width: 185px; }
aside .count { text-align: right; width: 35px; }
aside .count a { color: #999; font-weight: 300; }
aside li.active .count a { color: #999; }
aside .count-float { float: right; }
aside .header { position: relative; }
aside .header .name { color: rgba(0,0,0,0.8); font-size: 14px; font-weight: 500; margin: 13px 0 13px 20px; width: 185px; }
aside .header .count { color: rgba(0,0,0,0.8); font-size: 14px; font-weight: 500; margin: 13px 20px 13px 0; text-align: right; width: 35px; }
aside .header button { display: none; }
aside .gallery { margin-bottom: 5px; text-align: center; }
aside .gallery img { border: 1px solid #fff; border-radius: 3px; box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2); display: inline-block; margin: 5px; width: 50px; }
aside .badge { background-color: #dc3545; color: #fff; font-weight: 700; margin-left: 5px; }
aside .bi { margin-left: -3px; }

/* ------------------ */
/* ----- Search ----- */
/* ------------------ */
#site-search { margin: 20px auto 40px; max-width: 600px; }
#site-search input[type="search"] { padding: 15px; }
#site-search input[type="submit"] { border: 0; border-radius: 0 4px 4px 0; cursor: pointer; padding: 18px 30px; }

/* -------------------- */
/* ----- Listings ----- */
/* -------------------- */
#listings { display: flex; flex-wrap: wrap; justify-content: space-around; }
#listings a { text-decoration: none; }
#listings .listing { background: #fff; border-radius: 3px; box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.05); color: rgba(0,0,0,0.6); margin-bottom: 35px; position: relative; width: 260px; }
#listings .listing .overlay { background: #c92e2e; color: #fff; font-weight: 300; height: 20px; left: 0; padding: 0 5px; position: absolute; top: 10px; z-index: 10; }
#listings .listing .overlay:after { border-bottom: 10px solid transparent; border-left: 10px solid #c92e2e; border-top: 10px solid transparent; content: ''; height: 0; position: absolute; right: -10px; width: 0; }
#listings .listing .overlay.info { background: #2aa5d8; }
#listings .listing .overlay.info:after { border-left: 10px solid #2aa5d8; }
#listings .listing .overlay.service { background: #990000; }
#listings .listing .overlay.service:after { border-left: 10px solid #990000; }
#listings .listing .overlay.wanted { background: #d88c2a; }
#listings .listing .overlay.wanted:after { border-left: 10px solid #d88c2a; }
#listings .listing .new { color: #c92e2e; font-size: 0.75em; font-weight: 700; line-height: 1; padding: 2px 4px 2px 0; text-transform: uppercase; }
#listings .listing img { /*border-bottom: 1px solid #d7d7d7;*/ border: 1px solid #fff; border-radius: 3px 3px 0 0; box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2); height: auto; max-width: 100%; vertical-align: bottom; transition: all 0.5s; }
#listings .listing:hover img { filter: contrast(120%); }
#listings .listing h3 { font-size: 14px; overflow: hidden; padding: 10px; text-overflow: ellipsis; white-space: nowrap; }
#listings .listing h3 a { color: rgba(0,0,0,0.8); font-weight: 600; }
#listings .listing h3 a:visited { color: #848484; }
#listings .listing .username { margin: 0px 10px 0px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#listings .listing .date { margin: 10px; }
#listings .listing .price { border: 1px dashed #6ba229; border-radius: 2px; bottom: 0; color: #000; font-size: 16px; font-weight: 500; margin: 0 10px 8px 0; padding: 3px 6px 2px 6px; position: absolute; right: 0; }
.about { font-size: 30px; margin-right: 20px; }
.pagination { justify-content: center; margin-bottom: 20px; }
.pagination .page-link { border: 0; color: #000; font-weight: 500; padding: 10px 15px; } 
.pagination .page-item.active .page-link { background-color: var(--button-background); color: #000; }
.pagination .page-link:hover { background-color: var(--button-background); color: #000; }

/* ------------------- */
/* ----- Listing ----- */
/* ------------------- */
#user-details h3 { margin-bottom: 0; text-align: center; }
#user-details h3 a { font-size: 18px; font-weight: 500; }
#user-details .title { color: rgba(0,0,0,0.6); font-weight: 400; margin-top: 5px; text-align: center; }
#user-details .label { border-radius: 4px; color: rgba(0,0,0,0.8); display: block; font-weight: 400; margin: 15px auto 15px; max-width: 140px; padding: 5px; text-align: center; }
#user-details .label.grey { background-color: #f8f9fa; border: 1px solid #f2f2f1; box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.1); }
#user-details .label.black { background: linear-gradient(45deg, #191919 0%, #4a4a4a 30%, #4a4a4a 70%, #191919 100%); box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.1); color: #fff !important; }
#user-details .label.bronze { background: linear-gradient(45deg, #c46e40 0%, #f5cab0 30%, #f5cab0 70%, #c46e40 100%); box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.1); }
#user-details .label.silver { background: linear-gradient(45deg, #b5b5b5 0%, #fdfdfd 30%, #fdfdfd 70%, #b5b5b5 100%); box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.1); }
#user-details .label.gold { background: linear-gradient(45deg, #dbc26b 0%, #ffffac 30%, #ffffac 70%, #dbc26b 100%); box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.1); }
#user-details .row { padding: 5px 0; }
#user-details .row.first { padding-top: 15px; }
#user-details .column:first-child { font-weight: 600; }
#user-details .column:first-child a { color: #000; font-weight: 600; }
#user-details .column:last-child { text-align: right; font-weight: 300; }
#user-listings { display: flex; flex-wrap: wrap; justify-content: space-around;  }
#user-listings h2 { margin-bottom: 15px; text-align: center; width: 100%; }
#user-listings img { border: 1px solid #fff; border-radius: 3px; box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2); display: block; margin: 0 auto 30px; max-width: 100px; transition: all 0.5s; }
#user-listings a:hover img { display: block; filter: contrast(120%); margin: 0 auto 30px; }

#listing-images { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 30px; }
#listing-images img { border: 1px solid #fff; border-radius: 3px; box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2); margin: 0 5px 10px 5px; vertical-align: bottom; }
#bp_container button.bp-lr { font-size: 4em; }

#listing-details { padding-bottom: 20px; }
#listing-details .bi { margin-right: 0; }
#listing-details .description  { line-height: 1.5em; }
#listing-details .description .date { font-size: 12px; margin-top: 20px; }
#listing-details .description .price { font-size: 18px; font-weight: 600; margin-right: 20px; margin-top: 20px; text-align: right; }
#listing-details .description .btn { margin-top: 17px; }
#listing-details .attributes { border-left: 1px solid #e5e5e5; position: relative; max-width: 35%; }
#listing-details .attributes .row { padding: 0 0 10px 20px; }
#listing-details .attributes .row:last-of-type { margin-bottom: 30px; }
#listing-details .attributes .column:first-child { font-weight: 700; }
#listing-details .attributes .column:last-child { text-align: right; }
#listing-details .report { position: absolute; right: 5px; top: -1em; }
#listing-details .report button { background: transparent; color: #000; font-size: 18px; padding: 12px; }
#listing-details .report button:hover, #listing-details .report button:focus { background: transparent; box-shadow: none; color: #ff0000; }
#listing-details .share { background: transparent; bottom: 0; color: #000; font-size: 18px; padding: 10px 0 0 10px; position: absolute; right: 0; }
#listing-details .share:hover, #listing-details .share:focus { background: transparent; box-shadow: none; color: #0d6efd; }

/* -------------------- */
/* ----- Gallery ----- */
/* -------------------- */
#gallery-images { display: flex; flex-wrap: wrap; justify-content: space-around; }
#gallery-images div { margin-bottom: 30px; text-align: center; }
#gallery-images .bi { margin-right: 0; }
#gallery-images .image-block { background: #fff; border: 1px solid #fff; border-radius: 3px; box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2); position: relative; margin: 0 15px 10px 15px; max-width: 262px; }
#gallery-images .image-block div { box-shadow: 0 2px 4px -1px rgba(51,51,51,0.5); position: absolute; right: 5px; top: 5px; }
#gallery-images .image-block div button { padding: 2px 6px 3px 6px; }
#gallery-images .image-block img { border-radius: 3px; display: block; }
#gallery-images .image-block span { display: inline-block; padding: 5px; }
.modal-image { border-radius: 3px; display: block; margin: 0 auto 20px auto; max-width: 200px; }

/* -------------------- */
/* ----- Feedback ----- */
/* -------------------- */
.feedback.green .bi { color: green; display: block; font-size: 1.5rem; margin: 0 auto; text-align: center; }
.feedback.red .bi { color: #af2626; display: block; font-size: 1.5rem; margin: 0 auto; text-align: center; }
#feedbackoverview { font-size: 16px; }

/* -------------------------- */
/* ----- Create Listing ----- */
/* -------------------------- */
#progress { display: none; margin: 0 auto 20px auto; max-width: 600px; }
#progress .progress { height: 30px; margin: 20px auto 0 auto; }
#progress .progress-bar { background-color: #6ba229 !important; }
#progress .spinner-border { display: block; margin: auto; opacity: 0.5; }
/* https://github.com/christabor/css-progress-wizard */
.flexer,.progress-indicator{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.no-flexer,.progress-indicator.stacked{display:block}.no-flexer-element{flex:0}.flexer-element,.progress-indicator>li{flex:1}.progress-indicator{margin:0 0 3em;padding:0;font-size:100%;text-transform:uppercase}.progress-indicator>li{list-style:none;text-align:center;width:auto;padding:0;margin:0;position:relative;text-overflow:ellipsis;color:#bbb;display:block}.progress-indicator>li:hover{color:#6f6f6f}.progress-indicator>li.completed,.progress-indicator>li.completed .bubble{color:#97c06f}.progress-indicator>li .bubble{border-radius:1000px;width:20px;height:20px;background-color:#bbb;display:block;margin:0 auto .5em;border-bottom:1px solid #888}.progress-indicator>li .bubble:after,.progress-indicator>li .bubble:before{display:block;position:absolute;top:9px;width:100%;height:3px;content:'';background-color:#bbb}.progress-indicator>li.completed .bubble,.progress-indicator>li.completed .bubble:after,.progress-indicator>li.completed .bubble:before{background-color:#97c06f;border-color:#247830}.progress-indicator>li .bubble:before{left:0}.progress-indicator>li .bubble:after{right:0}.progress-indicator>li:first-child .bubble:after,.progress-indicator>li:first-child .bubble:before{width:50%;margin-left:50%}.progress-indicator>li:last-child .bubble:after,.progress-indicator>li:last-child .bubble:before{width:50%;margin-right:50%}.progress-indicator>li.active,.progress-indicator>li.active .bubble{color:#337AB7}.progress-indicator>li.active .bubble,.progress-indicator>li.active .bubble:after,.progress-indicator>li.active .bubble:before{background-color:#337AB7;border-color:#122a3f}.progress-indicator>li a:hover .bubble,.progress-indicator>li a:hover .bubble:after,.progress-indicator>li a:hover .bubble:before{background-color:#5671d0;border-color:#1f306e}.progress-indicator>li a:hover .bubble{color:#5671d0}.progress-indicator>li.danger .bubble,.progress-indicator>li.danger .bubble:after,.progress-indicator>li.danger .bubble:before{background-color:#d3140f;border-color:#440605}.progress-indicator>li.danger .bubble{color:#d3140f}.progress-indicator>li.warning .bubble,.progress-indicator>li.warning .bubble:after,.progress-indicator>li.warning .bubble:before{background-color:#edb10a;border-color:#5a4304}.progress-indicator>li.warning .bubble{color:#edb10a}.progress-indicator>li.info .bubble,.progress-indicator>li.info .bubble:after,.progress-indicator>li.info .bubble:before{background-color:#5b32d6;border-color:#25135d}.progress-indicator>li.info .bubble{color:#5b32d6}.progress-indicator.stacked>li{text-indent:-10px;text-align:center;display:block}.progress-indicator.stacked>li .bubble:after,.progress-indicator.stacked>li .bubble:before{left:50%;margin-left:-1.5px;width:3px;height:100%}.progress-indicator.stacked .stacked-text{position:relative;z-index:10;top:0;margin-left:60%!important;width:45%!important;display:inline-block;text-align:left;line-height:1.2em}.progress-indicator.stacked>li a{border:none}.progress-indicator.stacked.nocenter>li .bubble{margin-left:0;margin-right:0}.progress-indicator.stacked.nocenter>li .bubble:after,.progress-indicator.stacked.nocenter>li .bubble:before{left:10px}.progress-indicator.stacked.nocenter .stacked-text{width:auto!important;display:block;margin-left:40px!important}@media handheld,screen and (max-width:400px){.progress-indicator{font-size:60%}}
#listing-images .draggable { cursor: move; display: inline; }
#listing-images .draggable:hover img { border: 1px dashed #666; }
#listing-images .draggable span.delete { background: rgba(255,255,255,0.9); border-radius: 10px; position: absolute; right: 10px; top: 5px;  transition: all 0.5s; }
#listing-images .draggable span.delete:hover { background: rgba(255,255,255,0.6); }
#listing-images #primary { position: relative; }
#listing-images #primary div:first-child { color: #f84e19; position: absolute; text-align: center; top: -20px; width: 100%; z-index: 999; }
#listing-images #primary img { border-color: #f84e19; }

#listing-images i.icon { font-size: 1.5em; margin: 6px; top: 10px; }
[draggable] { user-select: none; }
.alert:not(#feedback) { margin-bottom: 40px; }

/* ------------------------------- */
/* ----- Businesses & Events ----- */
/* ------------------------------- */
#businesses .business { background: #fff; border-radius: 3px; box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.05); color: rgba(0,0,0,0.8); margin: 15px 0 15px 0; padding: 10px; }
#businesses .business h3 { margin: 0 0 10px 0; }
#businesses .business h3 a { color: #000; font-size: 18px; font-weight: 500; }
#businesses .business .avatar { height: 100px; margin: 0; width: 100px; }
#businesses .business .info-block { margin-left: 10px; }
#businesses .business .info-block .website { margin-top: 10px; }
#businesses .business .category-block { margin: 5px 0 -5px 0; }
#businesses .business .category-block .category { border: 1px solid #d1d1d1; border-radius: 4px; color: #212529; display: inline-block; margin: 3px 6px 3px 0; padding: 4px 5px; transition: 0.1s all linear; }
#businesses .business .category-block .category:hover { background-color: #212529; border-color: #212529; color: #fff; }

#map { height: 300px; width: 100%; }
#map-key { text-align: center; }
#map-key img { margin: 0 10px; }
#events #map { margin: 10px 0; }
#events .event { background: #fff; border-radius: 3px; box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.05); color: rgba(0,0,0,0.8); margin: 15px 0 15px 0; padding: 10px; position: relative; }
#events .event h3 { margin: 0 0 10px 0; }
#events .event h3, #events .event h3 a { font-size: 18px; font-weight: 500; }
#events .event .description { margin-bottom: 10px; }
#events .event .date { text-align: right; }
#events .event .user { text-align: right; }
#events .event h3, .event form, .event form button { display: inline-block !important; }
#events .event form button { font-size: 12px !important; font-weight: 400 !important; line-height: 1; margin-left: 5px !important; padding: 3px 5px !important; }

#feature { display: flex; flex-wrap: wrap; justify-content: center;  }
#feature .featureblock { background-color: #fff; border-radius: 4px; box-shadow: 0 2px 4px -1px rgba(51,51,51,0.1); margin: 15px; text-align: center; width: 270px; }
#feature .featureblock .title { background-color: #c2c8bd; border-radius: 4px 4px 0 0; font-size: 18px; font-weight: 500; padding: 20px 5px; }
#feature .featureblock .price { font-size: 15px; font-weight: 600; margin: 20px; }
#feature .featureblock .mid { font-size: 14px; font-weight: 400; margin: -15px 0; }
#feature .featureblock hr { background-color: #f3f3f3; height: 2px; margin: 0 20px 10px 20px; }
#feature .featureblock span { display: inline-block; margin: auto; }
#feature .featureblock li { padding: 10px; text-align: left; }
#feature .featureblock li:last-of-type { margin-bottom: 10px; }
#feature .featureblock li .bi { color: green; margin: 0 5px 0 -3px; }

/* -------------------- */
/* ----- Messages ----- */
/* -------------------- */
.message-left { justify-content: flex-start; }
.message-right { justify-content: flex-end; }
.message-left .avatar, .message-right .avatar { height: 50px; margin: 0; width: 50px; }
.message { background: #eee; border-radius: 15px; color: #000; margin: 0 20px 20px 20px; max-width: 500px; min-width: 150px; padding: 10px 15px 15px 15px; position: relative; }
.message.right { background: #c6ecf8; }
.message.left:before { border: 15px solid #eee; border-bottom: 15px solid transparent; border-left: 15px solid transparent; content: ""; height: 0; left: -16px; position: absolute; top: 20px; width: 0; }
.message.right:before { border: 15px solid #c6ecf8; border-bottom: 15px solid transparent; border-right: 15px solid transparent; content: ""; height: 0; position: absolute; right: -16px; top: 20px; width: 0; }
.message .user { margin-bottom: 5px; margin: 0 15px 5px 0; }
.message .user a { font-weight: 600; }
.message .date { color: #555; font-size: 0.75em; margin-top: 10px; text-align: right; }
.message .status { color: #555; font-size: 0.75em; position: absolute; right: 5px; top: 13px; }
i.read { color: rgba(0,0,0,0.3); margin-right: 5px; }
i.unread { color: #ff9c00; margin-right: 5px; }

/* ------------------ */
/* ----- Footer ----- */
/* ------------------ */
footer { border-top: 1px solid rgba(0,0,0,0.1); margin: 40px auto 0; padding: 10px; text-align: center; max-width: 400px; }
footer li { display: inline; margin: 5px 10px; }

/* ------------------ */
/* ----- Mobile ----- */
/* ------------------ */
@media (min-width: 601px) {
	div.mcollapse:not(.show) { display: block; }
	button.btn-collapse:not(.dhide) { display: none; }
}
@media (max-width: 400px) {
	th:not(:first-child) { display: none; }
	td:not(:first-child) { display: block; }
}
@media (max-width: 600px) {
	header .user-menu { margin-bottom: 10px; margin-top: 10px; text-align: center; }
	header .header-btn { margin-top: 20px; }
	header .logo, header .title { display: none; }
	#navigation a { letter-spacing: 1.1px; margin: 10px; }
	aside { margin-right: 0; max-width: 100%; flex: 1 1 100%; }
	aside .name { width: auto; }
	aside.secondary { order: 2; }
	main { max-width: 100%; }
	.box, #site-search { margin-left: 10px; margin-right: 10px; }
	button.btn-collapse { display: inline !important; }
	.break,#listing-details .description,#listing-details .attributes { display: flex; flex: 1 1 100%; flex-wrap: wrap; max-width: 100%; }
	#listing-details .share { margin: -15px -5px -15px auto !important; padding: 5px; position: static; }
	.attributes .column { flex: 1 0 0%; width: 100%; }
}
@media (max-width: 750px) {
	header .container { height: auto; }
	header .logo { display: none; }
}
@media (max-width: 800px) {
	.form .column { flex: 1 1 100%; text-align: left; }
	.form .column.small { margin-bottom: 5px; }
	.break,#listing-details .description,#listing-details .attributes { display: flex; flex: 1 1 100%; flex-wrap: wrap; max-width: 100%; }
	#listing-details .attributes { border-left: 0; border-top: 1px solid #e5e5e5; margin-top: 20px; padding-top: 20px; }
	.form { width: 100%; }
	#listing-details .share { margin: -15px -5px -15px auto !important; padding: 5px; position: static; }
	#listing-details .description .price { margin-right: 0; }
	#listing-details .attributes .row { padding: 0 0 10px 0; }
	.row:has(.box) { margin: 0 0 40px 0; }
	.row:has(.box) .column { flex: 1 1 100%; margin: 0; }
}
@media (max-width: 850px) {
	/*header .logo img { max-width: 100%; max-height: auto; }
	header .logo span { display: none; }*/
	#listing-images a, #listing-images img { margin: 5px; max-width: 132px; }
	#businesses .business, #events .event { margin: 15px 10px 15px 10px; }
}

/* --------------- */
/* ----- Dev ----- */
/* --------------- */
.icon { background-position: center; background-repeat: no-repeat; /*border: 1px solid red;*/ display: inline-block; height: 1em; margin-right: 3px; vertical-align: -.15em; width: 1em; }
.icon.np { margin-right: 0 !important; }
.icon.plus { background-image: url('../img/icon/plus.svg'); }
.icon.chevron-right { background-image: url('../img/icon/chevron-right.svg'); margin: 0 3px 0 -3px; }
.icon.return-right { background-image: url('../img/icon/arrow-return-right.svg'); margin: 0 5px 0 -3px; }
.icon.arrow-right { background-image: url('../img/icon/arrow-right-short.svg'); margin: 0 3px 0 -3px; }
.icon.trash { background-image: url('../img/icon/trash.svg'); margin: 0 3px 0 -3px; }
.icon.user { background-image: url('../img/icon/user.svg'); margin-right: 5px; opacity: 0.6; }
.icon.clock { background-image: url('../img/icon/clock.svg'); margin-right: 5px; opacity: 0.6; }
.icon.envelope { background-image: url('../img/icon/envelope.svg'); height: 1.3em; margin: 0; opacity: 0.8; vertical-align: -.35em; width: 1.3em; } /* needs shake animation */
.icon.bell { background-image: url('../img/icon/bell.svg'); margin: 0; opacity: 0.8; } /* needs shake animation */
.icon.bars { background-image: url('../img/icon/bars.svg'); margin-right: 5px; vertical-align: -.25em; }


/*

.icon.shareTODO { background-image: url('../img/icon/arrow-return-right.svg'); }

.icon.keyTODO { background-image: url('../img/icon/arrow-return-right.svg'); }
.icon.logoffTODO { background-image: url('../img/icon/arrow-return-right.svg'); }
.icon.modal-closeTODO { background-image: url('../img/icon/arrow-return-right.svg'); }
.icon.readTODO { background-image: url('../img/icon/arrow-return-right.svg'); }
.icon.unreadTODO { background-image: url('../img/icon/arrow-return-right.svg'); }
.icon.plus.suggestcategoryTODO { background-image: url('../img/icon/arrow-return-right.svg'); }

.icon.iiconforaboutTODO { background-image: url('../img/icon/arrow-return-right.svg'); }
*/


/*
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/opensans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*/
/* * { font-family: 'Open Sans', Inter, arial, sans-serif; } */




/*aside li:hover { background: rgba(0,0,0,0.1); }*/