@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  src: url('../components/RobotoFont/Roboto-Regular.ttf');
}

html {
  --primary-green: rgb(53, 180, 36);
  --secondary-green: rgb(63, 211, 43);
  --checked-color: rgb(55, 148, 36);
  --dark-green: rgb(55, 148, 36);

  --bg-color: #e8e8e8;
  --box-shadow: rgb(201, 201, 201);
  --text-shadow: rgb(201, 201, 201);
  --grey-text: rgb(133, 133, 133);
  --dark-grey-text: rgb(100, 100, 100);
  
  font-family: Roboto, Tahoma, Arial, sans-serif;
  font-size: 16px;
}

body {
  padding: 0px;
  margin: 0px;
  background-color: var(--bg-color);
}

iframe {
  border: 0px;
  padding: 0px;
  margin: 0px;
  display: block;
}

div#mainContainer {
  margin: 16px;
}

h4 {
  margin-top: 8px;
  margin-bottom: 8px;
}

ul {
  margin-top: 8px;
  margin-bottom: 16px;
}

ul.cardList {
  padding: 0px;
}

button {
  cursor: pointer;
  display: inline-block;
}

button.outlined {
  background-color: white;
}

button.rounded {
  border-radius: 50vh;
  line-height: 1.6em;
  padding: 2px 12px 2px 12px;
}

a {
  color: var(--primary-green);
}

a:hover {
  color: var(--secondary-green);
}

a.cardLink {
  display: inline-block;
  background-color: white;
  border: 1px solid black;
  border-radius: 7px;
  padding: 10px 20px;
  text-decoration: none;
  margin-bottom: 6px;
  width: 200px;
  text-align: center;
  color: black;
}

a.cardLink:hover {
  color: var(--dark-grey-text);
  border-color: var(--dark-grey-text);
}

div#listingsSalesOrders {
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  padding: 12px 8px;
  display: inline;
  border-radius: 22px;
  text-align: center;
  box-shadow: 3px 3px 3px 1px var(--box-shadow);
}

div#listingsSalesOrders div {
  background-color: inherit;
  display: inline-block;
  padding: 6px;
  width: 84px;
  border-radius: 18px;
  color: var(--grey-text);
  font-weight:bold;
}

div#listingsSalesOrders div:hover {
  color: var(--dark-grey-text);
}

div#listingsSalesOrders div.selected {
  background-color: rgb(155, 255, 56);
  color: black;
  cursor: default;
}

div#listingsSalesOrders a {
  text-decoration: none;
  color: inherit;
}

div.breadcrumbTrail {
  display: flex;
  align-items: center;
  font-size: 0.83em;
}

div.breadcrumbTrail>span {
  text-align: center;
}

div.breadcrumbTrail>img {
  height: 12px;
  padding: 0 8px 0 8px;
}

div#searchContainer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
}

div.blankSpace {
  display: block;
  height: 110px;
}

div.bannerBar {
  display: block;
  background-color: var(--checked-color);
  color: white;
  font-size: 0.8em;
  line-height: 1.8em;
  text-align: center;
  padding: 4px;
}

.loading {
  filter: blur(5px);
  position: relative;
  overflow: hidden;
}

img.loadingIcon {
  position: absolute;
  top: -1em;
  left: 43%;
  filter: blur(0px);
  width: 5em;
}

input#search {
  display: inline-block;
  border: 1px solid black;
  border-radius: 7px;
  padding: 11px 45px 11px 11px;
  font-size: 1.2em;
  width: 265px;
}

input#search + img {
  display: inline-block;
  margin-left: -43px;
  cursor: pointer;
}

div.filterSearchBar {
  display: flex;
  align-items: center;
}

div.filterSearchBar
  >input {
  display: inline-block;
  border: 1px solid black;
  border-radius: 7px;
  padding: 11px 58px 11px 11px;
  font-size: 1.2em;
  width: 265px;
}

div.filterSearchBar
  >img {
  display: inline-block;
  width: 42px;
  margin: 0 0 0 -50px;
  cursor: pointer;
}

div.listCard {
  background-color: white;
  border: 1px solid black;
  border-radius: 7px;
  display: inline-block;
  height: 5em;
  width: 300px;
  padding: 10px 14px 10px 12px;
  margin: 5px 5px 5px 5px;
  vertical-align: top;
  box-shadow: 3px 3px 3px 1px var(--box-shadow);
}

input[type=checkbox] {
  cursor: pointer;
}

div.centeredContent {
  text-align: center;
}

label {
  cursor: pointer;
}

div.formBlock {
  color: var(--dark-grey-text);
  display: inline-block;
  border: 0px solid black;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  width: 310px;
}

div.formBlock label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.85em;
  padding: 0 0 0 6px;
  cursor: pointer;
}

div.formBlock input[type=text], 
div.formBlock input[type=email], 
div.formBlock input[type=password], 
div.formBlock input[type=number],
div.formBlock textarea, 
div.formBlock select {
  border-radius: 6px;
  border: 1px solid rgb(80, 80, 80);
  padding: 8px 8px 6px 8px;
  margin-bottom: 8px;
  width: 100%;
  font-size: 1.2em;
  box-sizing: border-box;
  font-family: inherit;
}

div.formBlock button[disabled],
div.formBlock button[disabled]:hover {
  background-color: var(--grey-text);
  cursor: default;
}

select,
option {
  cursor: pointer;
  background-color: white;
}

div.validationBlock {
  padding: 6px;
  border: 1px solid var(--primary-green);
  border-radius: 6px;
  margin-bottom: 8px;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--primary-green);
  color: white;
}

p.validationBlock {
  font-size: 0.8em;
  padding: 0.7em 1em;
  border: 1px dashed rgb(207, 101, 101);
  border-radius: 6px;
  margin: -2px 0 1em 0;
  width: 100%;
  box-sizing: border-box;
  background-color: rgb(231, 130, 130);
  color: white;
}

button {
  text-align: center;
  background-color: var(--primary-green);
  border-radius: 5px;
  padding: 7px 11px;
  border: 0px;
  color: white;
  font-family: inherit;
}
button:hover {
  background-color: var(--secondary-green);
}

button.iconTextBtn {
  display: flex;
  align-items: center;
  justify-content: center;
}
button.iconTextBtn>img {
  max-width: 22px;
  max-height: 22px;
  margin-right: 8px;
}

img.iconBtn {
  cursor: pointer;
}
img.iconBtn:hover {
  opacity: 0.8;
}

img.iconBtn.backBtn {
  width: 32px;
  display: inline-block;
  vertical-align: bottom;
  margin-right: 8px;
}

/* Checkbox Formatting */
.css-checkbox {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  padding: 0;
  border: 0;
}
.css-checkbox + label {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  color: rgb(97, 97, 97);
  height: 1.2em;
}
.css-checkbox + label::before {
  content: " ";
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  width: 11px;
  height: 11px;
  background-color: inherit;
  border-width: 1px;
  border-style: solid;
  border-color: var(--checked-color);
  border-radius: 3px;
  box-shadow: none;
}
.css-checkbox:checked + label::after {
  content: " ";
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMTczLjg5OCA0MzkuNDA0bC0xNjYuNC0xNjYuNGMtOS45OTctOS45OTctOS45OTctMjYuMjA2IDAtMzYuMjA0bDM2LjIwMy0zNi4yMDRjOS45OTctOS45OTggMjYuMjA3LTkuOTk4IDM2LjIwNCAwTDE5MiAzMTIuNjkgNDMyLjA5NSA3Mi41OTZjOS45OTctOS45OTcgMjYuMjA3LTkuOTk3IDM2LjIwNCAwbDM2LjIwMyAzNi4yMDRjOS45OTcgOS45OTcgOS45OTcgMjYuMjA2IDAgMzYuMjA0bC0yOTQuNCAyOTQuNDAxYy05Ljk5OCA5Ljk5Ny0yNi4yMDcgOS45OTctMzYuMjA0LS4wMDF6Ii8+PC9zdmc+");
  background-repeat: no-repeat;
  background-size: 8px 8px;
  background-position: center center;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0px;
  top: 3px;
  text-align: center;
  background-color: rgb(67, 176, 42);
  height: 14px;
  width: 14px;
  border-radius: 3px;
}

/* Radio Buttons */
input[type="radio"] {
  height: 1.1em;
  width: 1.1em;
  margin-right: 0.5rem;
  accent-color: var(--checked-color);
  cursor: pointer;
}

/* Accordion Panels */
label.accordion {
  cursor: pointer;
}

input.accordion + a label.accordion h3:hover {
  color: var(--grey-text);
}

input.accordion + a label.accordion h3::after {
  display: inline-block;
  margin-left: 10px;
  background-image: url('../images/icons8-collapse-arrow-50.png');
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
  content: "";
  transform: rotate(90deg);
  transition: 0.5s ease;
}

input.accordion#accordionPanel_myListings:checked + a label.accordion h3::after {
  transform: rotate(180deg);
  transition: 0.5s ease;
}

#accordionPanel_myListings {
  display: none;
}

.collapsible {
  display: block;
}

#accordionPanel_myListings + a + .collapsible {
  overflow: auto;
  height: 0;

  -webkit-transition: height 1s ease;
  -moz-transition: height 1s ease;
  -ms-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}

#accordionPanel_myListings:checked + a + .collapsible {
  height: initial; /* needs a numeric value here to keep transition */
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  /*vertical-align: center;*/
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* General item filters */
button#categories-selectAll {
  background-image: url('../images/icons8-checked-checkbox-24-black.png');
}

button#categories-selectAll:hover {
  background-image: url('../images/icons8-checked-checkbox-24-white.png');
}

button#categories-clearSelection {
  background-image: url('../images/icons8-x-coordinate-24-black.png');
}

button#categories-clearSelection:hover {
  background-image: url('../images/icons8-x-coordinate-24-white.png');
}

/* Breadcrumbs */
.breadcrumbsTyped {
  color: var(--grey-text);
}