@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900');

body {
    background-color: white;
    box-sizing: border-box;
    color: black;
    margin: 0;
    min-height: 100vh;
    padding: 0;
}

body,
table,
td,
div,
p,
span,
input,
select,
textarea,
header,
section {
    font-family: 'Barlow Condensed', 'Droid Sans', Trebuchet MS, Arial, Helvetica, sans-serif;
    font-size: 1.3rem;
    line-height: 1.5rem;
    font-weight: 300;
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    font-weight: normal;
    box-sizing: border-box;
}

h1 {
    font-size: 3em;
}

h2 {
    font-size: 2.5em;
}

h3 {
    font-size: 2em;
    padding: 0 0 0.7em;
}

h4 {
    font-size: 1.5em;
}

h5 {
    font-size: 1em;
}

h6 {
    font-size: 0.5em;
}

p {
    margin: 0;
    padding: 0.5em 0 0 0;
}

a:link,
a:visited,
a:hover,
a:active {
    color: #6c3f97;
    text-decoration: none;
    transition: 0.7s all;
}

a,
h1,
h2,
h3,
h4,
h5,
h6,
.fa.contact {
    color: #6c3f97;
}

.clearfix {
    clear: both;
}

.clearfix::before,
.clearfix::after {
    clear: both;
    content: " ";
    display: block;
}

header {
    background-color: #6c3f97;
    color: white;
    height: 6rem;
    line-height: 3em;
    padding: 0 0 0 0.4rem;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 10000;
}

header>h3 {
    background-color: #6c3f97;
    height: 5.5rem;
    padding-bottom: 0;
    position: relative;
    z-index: 10;
}

header a {
    border-bottom: 0 none !important;
    color: inherit !important;
    font-weight: normal !important;
}

header>h3 img {
    margin: 0.4rem 0;
    max-height: 95%;
    max-width: calc(100% - 5rem);
}

header nav>a {
    clear: right;
    float: right;
}

header nav {
    background-color: #6c3f97;
    box-sizing: border-box;
    display: block;
    line-height: 2.2em;
    min-width: 200px;
    padding: 0 1.5rem 1rem 0;
    position: absolute;
    right: 0;
    text-align: right;
    top: -1000%;
    transition: 0.7s all;
    width: 15%;
}

header nav.open {
    top: 100% !important;
}

header>nav .clearfix:first-of-type {
    border-bottom: 1px solid white;
    height: 0.7rem;
    width: calc(100% + 1.5rem);
}

header>i.fa {
    cursor: pointer;
    font-size: 2em;
    position: absolute;
    right: 2rem;
    top: 1.5rem;
    z-index: 10;
}

.add-options .btn:hover::before,
nav>a:hover::before {
    content: url(/img/butterfly-20x20.png);
    padding-right: 0.4rem;
}

.add-options {
    clear: both;
    padding: 0.3rem 0;
}

.add-options::before,
.add-options::after {
    clear: both;
    content: " ";
    display: block;
}

.add-options .btn {
    clear: both;
    color: white;
    float: right;
    font-size: 1.2rem;
    margin: 0.75rem 0 0;
    padding: 0;
}

main {
    padding-top: 6rem;
}

.breadcrumbs {
    background: white;
    border-top: 1px solid #6c3f97;
    border-bottom: 1px solid #6c3f97;
    height: 3.5rem;
    left: 0;
    line-height: 3.4rem;
    padding: 0 0.4rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

.breadcrumbs>li {
    display: inline-block;
    margin-left: 1rem;
    padding-left: 1.5rem;
    position: relative;
    top: -0.1rem;
}

.breadcrumbs>li:first-child {
    margin-left: 0;
    padding-left: 0;
}

.breadcrumbs>li::before {
    color: black !important;
    content: ">";
    cursor: default;
    left: 0;
    position: absolute;
}

.breadcrumbs>li:first-child::before {
    display: none;
}

.breadcrumbs .btn {
    float: right;
    font-size: 0.8rem;
    line-height: 0.6rem;
    margin-left: 2rem;
    margin-top: 0.4rem;
    padding: 0.4rem 0.6rem;
}

section.category {
    background-position: center calc(50% + 2rem);
    background-repeat: no-repeat;
    background-size: 85%;
    /* border: 1px solid #6c3f97; */
    display: inline-block;
    height: 25rem;
    margin: calc(2.5% - 2px);
    width: 20%;
}

section {
    clear: both;
    padding-top: 6rem;
    text-align: left;
}

section::before,
section::after {
    content: " ";
    clear: both;
    display: block;
}

section[data-widget="login"] {
    height: auto;
    left: 0;
    position: absolute;
    text-align: center;
    top: calc(50% - 200px);
    width: 100%;
}

section[data-widget="login"]>form {
    margin: 0 auto;
    width: 300px;
}

.form-control, .form-select {
    border-color: #6c3f97;
    padding-top: 0.3rem;
}

.form-control:focus, .form-select:focus {
    border-color: #6c3f97;
    box-shadow: 0 0 0 .25rem rgba(108, 63, 151, .25);
}

.form-control.invalid, .form-select.invalid {
    border-color: red;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6c3f97;
    --bs-btn-border-color: #6c3f97;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(108, 63, 151, 0.763);
    --bs-btn-hover-border-color: #6c3f97;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6c3f97;
    --bs-btn-active-border-color: #6c3f97;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c3f97;
    --bs-btn-disabled-border-color: #6c3f97;
    transition: all 0.7s;
}

.badge.text-bg-primary{
    background-color: #6c3f97 !important;
}

.badge.rounded-pill {
    font-weight: normal;
    padding: 0.4rem 0.7rem 0.4rem 0.8rem;
}

li.badge.rounded-pill:first-child {
    margin-right: 0.2rem;
}
li.badge.rounded-pill {
    margin-right: 0.5rem;
}

.badge > .fa::before {
    color: white;
}
.badge > .fa {
    float: right;
    width: 1.2rem;
    overflow: hidden;
    color: transparent;
    margin-left: 1rem;
    cursor: pointer;
    border-left: 1px solid white;
    padding-left: 0.4rem;
}
select#listing_Category.form-select {
    width: 300px;
    display: inline-block;
    margin-right: 0.3rem;
}

ul#active-categories {
    padding: 0.5rem 0 0;
    margin: 0;
    list-style: none outside none;
}

.main-content {
    margin-top: 3rem;
}

.has-search-results #main-content{
    display: none;
}

#search-result-content {
    display: none;
}

.has-search-results #search-result-content{
    display: block;
}

.main-content>h3>.btn{
    float:right;
    margin-top: 0.9rem;
}

.main-content>h3>.button-group {
    float: right;
    padding-bottom: 1rem;
    position: relative;
    z-index: 100;
}
.main-content>h3>.button-group>.btn:hover {
    opacity: 0.7;
}
.main-content>h3>.button-group>.btn {
    margin-top: 0.4rem;
    color: #6c3f97;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    display: block;
    border-bottom: 1px dotted;
    text-align: right;
    padding: 0.2rem 1.5rem 0.2rem 0.6rem;
    margin: 0;
    width: 100%;
    font-family: inherit;
    font-size: 1.2rem;
    position: relative;
    transition: opacity 0.5s;
}

.main-content>h3>.button-group>.btn:first-child {
    border-top: 1px dotted;
    margin-top: -0.3rem;
}
.main-content>h3>.button-group>.btn::before {
    font-family: 'FontAwesome';
    position: absolute;
    right: 0;
}

.main-content>h3>span.caption {
    font-size: 1rem;
    margin-left: 1rem;
    position: relative;
    top: -0.2rem;
}

#search-result-content>h3[data-results]::after {
    content: attr(data-results);
    font-size: 1rem;
    margin-left: 1rem;
    position: relative;
    top: -0.2rem;
}

.invalid-feedback {
    display: none !important;
}

.invalid-feedback.show {
    clear: both;
    display: block !important;
    margin-left: 0 !important;
}

#formbox>div.modal.show {
    z-index: 10000;
}

#formbox img.preview {
    max-height: 320px;
    max-width: 360px;
    border: 1px solid #6c3f97;
    display: block;
}

#formbox h1 {
    font-size: 3rem !important;
}

.modal.addeditform .modal-body> *:first-child {
    margin-top: 0;
}

.modal.addeditform .modal-body>label, .modal.addeditform .modal-body>.label {
    display: block;
    margin: 0.8rem 0.5rem;
    line-height: 2rem;
}

.modal.addeditform .modal-body>label span, .modal.addeditform .modal-body>.label span {
    display: inline-block;
    font-size: 0.8rem;
    line-height: 1.2rem;
    margin: 0.4rem 0 0.5rem 0.5rem;
    max-width: calc(100% - 5rem);
    vertical-align: text-top;
}

label[data-symbol]::before {
    content: attr(data-symbol);
    position: absolute;
    margin-left: 0.75rem;
    margin-top: 2.06rem;
    font-size: 1rem;
    font-weight: 500;
}

label[data-currency]::after {
    content: attr(data-currency);
    font-size: 1rem;
    position: absolute;
    margin-top: -2.2rem;
    right: 2.5rem;
}

label[data-symbol] > input{ 
    padding-left: 1.5rem;
}

label[data-currency] > input{
    padding-right: 3rem;
}

.image-upload-container {
    display: flex;
    /* Makes the container a flex container */
    align-items: stretch;
}

.image-upload-container>* {
    flex: 1;
}

.dropzone {
    min-height: 50px;
    border: 1px solid #6c3f97;
    border-left-width: 0;
    background: #fff;
    padding: 20px 20px;
    position: relative;
}

.dropzone>legend {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #6c3f97;
    bottom: 1rem;
    display: none;
    font-size: 1rem;
    padding: 0 1rem 0.5rem;
    position: absolute;
    width: calc(100% - 2.5rem);
}

.dropzone>legend.open {
    display: block;
}

.dropzone>legend>p {
    color: #6c3f97;
    font-size: 1rem;
    font-weight: 400;
    padding: 0.4rem 0 0;
}

.dropzone>legend>p>output {
    color: black;
    float: right;
    font-weight: 300;
}

.dropzone .invalid-feedback.show {
    margin-top: 2rem;
    position: relative;
}

input#imgInp {
    border-radius: 0;
    border-width: 0;
    cursor: pointer;
    display: block;
    height: 100%;
    left: 0;
    padding: 1rem;
    position: absolute;
    top: 0;
    width: 100%;
}

button#clear-upload {
    font-size: 0.9rem;
    margin: 0.4rem calc(50% - 2rem);
    padding: 0.1rem 0.5rem;
}

div#toast-message {
    border-color: #6c3f97;
    left: calc(50% - 175px);
    position: fixed;
    top: calc(50% - 3rem);
    z-index: 10000;
}

div#toast-message .toast-header {
    background-color: #6c3f97;
    border-color: #6c3f97;
    color: white;
}

div#toast-message .toast-header[data-type="failure"] {
    background-color: red;
    border-color: red;
}

div#toast-message .toast-header[data-type="info"] {
    background-color: #666;
    border-color: #666;
}

.main-content>h3 {
    line-height: 3rem;
    padding: 1.4rem 0 2rem;
    font-family: inherit;
    font-weight: normal;
}

.main-content>h3.fa::before {
    font-family: 'FontAwesome';
    padding-right: 0.5rem;
    font-size: 2rem;
}

li.form-check.form-switch {
    color: black;
    display: inline-block !important;
    font-size: 1rem;
    margin: 0;
    padding: 0.5rem 0.5rem 0 0;
}

li.form-check.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(108, 63, 151, 0.3);
}

li.form-check.form-switch .form-check-input:checked {
    background-color: #6c3f97;
}

li.form-check.form-switch .form-check-input {
    border-color: black;
    margin-left: 0;
    margin-right: 0.4rem;
}

#category-sort .form-check .form-check-input {
    float: right;
    margin-left: 0.4rem;
    margin-right: 0;
}

#category-sort li.form-check.form-switch {
    padding: 0.5rem 0 0 1.6rem;
}

.modal-body .alert-box {
    border: 1px solid lightgray;
    margin: 2rem;
    padding: 1rem;
}

.modal-body .alert-box h3 {
    padding-bottom: 0;
}

.modal-body .alert-box select.form-select {
    margin: 2rem 1rem;
    width: calc(100% - 2rem);
}

.modal-body .alert-box .invalid-feedback.show {
    font-size: 1rem;
    margin: -2rem 1rem !important;
    position: absolute;
}

.modal-body .listing-confirm-message {
    display: table-row;
}

.modal-body .listing-confirm-message span {
    display: table-cell;
    height: 90px;
    padding: 0 1rem;
    vertical-align: middle;
}

.modal-body .listing-confirm-buttons {
    text-align: center;
}

.modal-body .listing-confirm-buttons > button {
    margin-left: 0.3rem;
    margin-right: 0.3rem;
}

.img-holder {
    display: flex !important;
    aspect-ratio: 1 / 1;
    justify-content: center;
    align-items: normal;
    overflow: hidden;
    width: 90px;
}

.img-holder > img {
    max-height: 80px;
    max-width: 80px;
    overflow: hidden;
}

.modal-body .listing-confirm-message .img-holder {
    border: 1px solid lightgray;
    padding: 0.5rem;
}

/* sortable */
ul.ui-sortable, ul.admin-settings-list, ul#search-results {
    display: block;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

ul.ui-sortable>li, ul.admin-settings-list>li, ul#search-results>li {
    border: 1px solid;
    cursor: default;
    display: table;
    line-height: 2rem;
    list-style: none outside none;
    margin: 1rem 0;
    padding: 0.5rem;
    width: 100%;
}

ul.ui-sortable>li:first-child, ul.admin-settings-list>li:first-child, ul#search-results>li:first-child {
    margin-top: 0;
}

ul.ui-sortable>li.inactive > span, ul#search-results>li.inactive > span {
    opacity: 0.4;
}

ul.ui-sortable>li>menu, ul#search-results>li>menu {
    display: table-cell;
    list-style: none outside none;
    padding: 0;
    text-align: right;
    vertical-align: middle;
    width: 11rem;
}

ul#listings-sort>li>menu, ul#search-results>li>menu {
    width: 7rem;
}

ul.ui-sortable>li>menu>li, ul#search-results>li>menu>li {
    display: inline;
    list-style: none outside none;
}

ul.ui-sortable>li>menu>li>button.btn, ul#search-results>li>menu>li>button.btn {
    font-size: 0.9rem;
    padding: 0.2rem 0.6rem;
    position: relative;
    top: -0.1rem;
}

.ui-sortable>li>.img-holder-td, ul#search-results>li>.img-holder-td{
    display: table-cell;
    padding-left: 0;
    width: 80px;
}

.ui-sortable>li>.img-holder-td > .img-holder, ul#search-results>li>.img-holder-td>.img-holder {
    transition: 0.7s all;
}

.ui-sortable>li>.img-holder-td>.img-holder>img, ul#search-results>li>.img-holder-td>.img-holder>img {
    margin: 0 5px 0 0;
    transition: 0.7s all;
}

.ui-sortable>li>.img-holder-td:hover>.img-holder>img, ul#search-results>li>.img-holder-td:hover>.img-holder>img {
    opacity: 0.4;
}

.ui-sortable>li>span, ul#search-results>li>span {
    display: table-cell;
    font-size: 1rem;
    line-height: 1.2rem;
    padding-left: 5px;
    vertical-align: middle;
}

.ui-sortable>li>span.touch-handle::before {
    color: #6c3f97;
    content: "\f047";
    font-family: fontawesome;
    font-size: 2rem;
    line-height: 2rem;
    opacity: 0.5;
    transition: 0.7s all;
}

.ui-sortable>li>span.img-holder-td.touch-handle::before {
    opacity: 0;
    position: absolute;
    margin: 1.4rem;
}

.ui-sortable>li>span.img-holder-td.touch-handle:hover::before {
    opacity: 1;
}

.ui-sortable>li>span.touch-handle {
    cursor: move;
    text-align: left;
    width: 3rem;
}

.ui-sortable menu .btn.listings::before, ul#search-results menu .btn.listings::before {
    content: "\f302";
    font-family: fontawesome;
    padding-right: 5px;
}

.ui-sortable menu button.btn.edit::before, ul#search-results menu button.btn.edit::before {
    content: "\f044";
    font-family: fontawesome;
    padding-right: 5px;
}

.ui-sortable menu button.btn.delete::before, ul#search-results menu button.btn.delete::before {
    content: "\f2ed";
    font-family: fontawesome;
}

/* admin-settings-list */
ul.admin-settings-list>li {
    display: block;
}
ul.admin-settings-list>li::before, ul.admin-settings-list>li::after{
    clear: both;
    content: " ";
    display: block;
}
ul.admin-settings-list>li>h4 {
    float: left;
}
ul.admin-settings-list>li>menu {
    float: right;
}
ul.admin-settings-list>li>menu>li:first-child {
    margin-top: 0.2rem;
}
ul.admin-settings-list>li>menu>li {
    list-style: none outside none;
    font-size: 0.8rem;
    line-height: normal;
    float: left;
    clear: both;
    margin-right: 1rem;
}
a.btn {
    color: white;
}
.admin-settings-list button.btn.btn-success {
    cursor: default;
    opacity: 0.6;
    background: #198754 !important;
}

li#search.input-group {
    position: absolute;
    z-index: -1;
    width: 19rem;
    width: calc(100% - 0.8rem);
    overflow: hidden;
    height: 2.3rem;
    white-space: nowrap;
    right: 0.4rem;
    margin-top: 0.7rem;
    display: block;
}
li#search.input-group.open {
    z-index: 10;
}
#search.input-group.open.show-advanced, #search.input-group.open.hide-advanced{
    overflow: visible;
}
/*
li#search.input-group.has-results{
    overflow: visible;
}

li#search.input-group.has-results::after{
    content: " ";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.8);
}
*/
li#search::before{
    content: " ";
    display: none;
}
#search.input-group span.search-field.show {
    /* transform: translateX(-19rem); */
    transform: translateX(calc(-100% - 3rem));
}
span.search-field {
    background-color: white;
    border: 1px solid #6c3f97;
    border-radius: 0.4rem !important;
    position: absolute;
    right: calc(-100% + 3rem);
    transition: 0.7s all;
    width: calc(100% - 3rem);
    z-index: 100;
}
#listingmodal label span.search-field{
    right: auto;
    left: 0;
}
span.search-field input.form-control {
    border: 0 none !important;
    border-radius: 0;
    margin-left: 0.5rem;
    width: calc(100% - 6.5rem);
}
span.search-field input.form-control:focus {
    box-shadow: none;
}
span.search-field i {
    display: none;
    position: absolute;
    top: 0.5rem;
    right: 6.5rem;
    color: gray;
    font-size: 1rem;
    height: 1rem;
    width: 1rem;
    overflow: hidden;
    cursor: pointer;
}
span.search-field.has-value i {
    display: block;
}
#search.input-group span.search-field .btn {
    background-color: #6c3f97;
    border-radius: 0 0.4rem 0.4rem 0;
    color: white;
    float: none;
    height: 2.2rem;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 6rem;
}
/*
#search.input-group input.form-control.show {
    transform: translateX(calc(-100% - 3rem));
}
#search.input-group input.form-control {
    width: 15rem;
    position: absolute;
    z-index: 100;
    right: -16rem;
    width: calc(100% - 3rem);
    right: calc(-100% + 3rem);
    border-radius: 0.4rem;
    transition: 0.7s all;
}
*/
#search.input-group>.input-group-text {
    position: absolute;
    top: 0;
    right: 0;
    width: 3rem;
    height: 100%;
    border: 0;
    color: #6c3f97;
    background: white;
    font-size: 2rem;
    border-radius: 0;
    display: block;
    padding: 0;
    margin: 0;
    line-height: 2rem;
    z-index: 101;
    cursor: pointer;
}
#search.input-group>.input-group-text.running, #search.input-group button#advanced-options.running {
    cursor: default;
}
#search.input-group>.input-group-text.running i, #search.input-group button#advanced-options.running {
    opacity: 0.4;
}
#search.input-group.show-advanced>ul.advanced-search-options {
    transform: translateY(calc(100% + 3.5rem));
}
#search.input-group>ul.advanced-search-options {
    position: absolute;
    /* min-width: 14rem; */
    bottom: 130%;
    background-color: white;
    right: 0;
    border: 1px solid;
    white-space: nowrap;
    margin: 0;
    padding: 0.5rem;
    transition: 0.7s all;
}
#search.input-group>ul.advanced-search-options > li {
    white-space: nowrap;
    margin: 0;
    padding: 0 1rem;
    list-style: none outside none;
    line-height: 3rem;
}
#search.input-group>ul.advanced-search-options>li>label {
    display: block;
    cursor: pointer;
}
#search.input-group>ul.advanced-search-options>li>label[data-count]::after{
    content: "(" attr(data-count) ")";
    padding-left: 0.3rem;
}
#search.input-group>ul.advanced-search-options>li:hover {
    background-color: rgba(0, 0, 0, 0.125);
}
#search.input-group>ul.advanced-search-options > li input[type="checkbox"] {
    margin-right: 0.7rem;
}
#search.input-group>ul.advanced-search-options > li.active-option {
    border-top: 1px solid;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}
#listingmodal label span.search-field {
    right: auto;
    left: auto;
    height: 2.3rem;
    width: 295px;
    display: inline-block;
    position: relative;
    /* float: right; */
    margin: -0.3rem 0.5rem 0;
}
#listingmodal label span.search-field input.form-control {
    width: calc(100% - 1rem);
}
#listingmodal label span.search-field i {
    right: 0.5rem;
    top: 0.6rem;
}

ul#related-listings {
    list-style: none outside none;
    margin: 0;
    padding: 0.5rem 0;
}
#related-listings > li.badge.rounded-pill {
    font-size: 0.8rem;
    width: 100%;
    text-align: left;
}
ul#related-search-results {
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid;
    font-size: 1rem;
    width: calc(100% - 3rem);
    list-style: none outside none;
    margin: 0;
    padding: 0;
    z-index: 1;
}
ul#related-search-results.with-results {
    display: block;
}
ul#related-search-results > li {
    padding: 0.25rem 1rem;
}
ul#related-search-results > li:hover{
    background-color: lightgray;
    cursor: pointer;
}

/*
ul#search-results {
    background: white;
    display: none;
    position: absolute;
    left: 0;
    max-height: calc(100vh - 6em);
    width: calc(100% - 3rem);
    border: 1px solid;
    border-radius: 0.4rem;
    margin: 0;
    padding: 3rem 1rem 0;
    overflow: auto;
    z-index: 1;
}
li#search.input-group.has-results ul#search-results{
    display: block;
}
ul#search-results > li {
    display: table-row;
    padding: 0;
    margin: 0;
    list-style: none outside none;
}
ul#search-results > li > *{
    border-top: 1px solid;
    display: table-cell;
    vertical-align: middle;
}
ul#search-results > li > span.img-holder-td {
    padding: 0.5rem 0 0;
}
ul#search-results span.listing-details {
    white-space: normal;
    font-size: 1rem;
}
*/
ul#search-results span.listing-details em {
    font-style: normal;
    background-color: yellow;
}
@media (max-width: 992px) {
    .image-upload-container {
        display: block;
        /* Makes the container a flex container */
        align-items: normal;
    }

    .image-upload-container>* {
        width: 360px;
    }

    .dropzone {
        border-left-width: 1px;
        border-top-width: 0;
    }

    .dropzone>legend {
        bottom: 100%;
    }
    
    .modal.modal.addeditform .modal-body>label span.info-feedback{    
        line-height: 1rem;
        margin-top: 0;
    }
}

@media (max-width: 620px) {
    .main-content>h3, #formbox h1{
        font-size: 2rem !important;
    }
    .main-content>h3>span.caption, #search-result-content>h3[data-results]::after {    
        display: block;
        margin-left: 0.2rem;
        top: 0.1rem;
    }
    .main-content>h3>.button-group {
        margin-top: 0.5rem;
        padding-bottom: 0;
    }
}