/*########################################

	Project:	Linkup Paint Supplies Ltd
	Script:		Apps Sub-site
	Version:	1.0.0
	Last Change:	18/07/2022
	Developed:	dpDesignz - www.dpdesignz.co.nz

#########################################*/
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
:root {
  --select-border: #777;
  --select-focus: #00378b;
  --select-arrow: var(--select-border);
}

.Fear {
  display: none;
}

*:focus {
  outline: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  display: grid;
  grid-template-rows: 65px 1fr;
  margin: 0;
  min-height: 100vh;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: black;
}
header section {
  display: flex;
  align-items: center;
}
header section #header__logo img {
  margin: 0 8px;
  width: auto;
  height: 30px;
}
header section#header__quick-links nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}
header section#header__quick-links nav ul li {
  display: inline-block;
}
header section#header__quick-links nav ul li a {
  line-height: 65px;
  font-weight: 600;
}
header section#header__quick-links nav ul li:hover {
  background-color: #00378b;
}
header section#header__quick-links nav ul li:hover > ul {
  display: inherit;
}
header section#header__quick-links nav ul a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  color: #FFF;
  text-decoration: none;
}
header section#header__quick-links nav ul a:hover {
  background-color: #00378b;
}
header section#header__quick-links nav ul ul {
  display: none;
  position: absolute;
  top: 65px;
  z-index: 10;
}
header section#header__quick-links nav ul ul li {
  width: 170px;
  float: none;
  display: list-item;
  position: relative;
  font-size: 14px;
  background: #1f2227;
}
header section#header__quick-links nav ul ul li > a {
  padding: 6px 10px;
  line-height: 1.4;
  font-weight: normal;
}
header section#header__quick-links nav ul ul li > a:after {
  font: var(--fa-font-sharp-solid);
  content: " +";
}
header section#header__quick-links nav ul ul li > a:only-child:after {
  content: "";
}
header section#header__quick-links nav ul ul ul {
  position: absolute;
  top: 0px;
  left: 100%;
}
header section#header__sub-nav nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 8px;
  color: white;
  font-size: 0.9em;
}
header section#header__sub-nav nav em {
  padding: 6px;
  font-size: 0.85em;
}
header section#header__sub-nav nav ul {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
header section#header__sub-nav nav ul li {
  padding: 6px;
  font-weight: 600;
}
header section#header__sub-nav nav ul li a {
  color: inherit;
  text-decoration: none;
}
header section h1 {
  margin: 0 0 0.1rem;
  font-size: 1.3rem;
  color: white;
}

main {
  display: grid;
  grid-template-columns: 225px 1fr;
  justify-content: center;
  /* align-items: center; */
  color: #cfd0d1;
  background: #1f2227;
}
main .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  font-size: 1.2rem;
  text-transform: uppercase;
  color: white;
  background-color: #4CAF50;
  border: 0;
  border-radius: 5px;
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.25);
}
main .btn:hover {
  cursor: pointer;
  background-color: #3c8c41;
  box-shadow: none;
}
main aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-height: 100vh;
  border-right: 1px solid #2c2f34;
  overflow: auto;
}
main aside .btn {
  width: 100%;
  font-size: 13px;
  text-transform: initial;
  color: #FFC745;
  background-color: #4A466E;
}
main aside .btn:hover {
  background-color: #393654;
}
main aside #sidebar__tools {
  padding: 8px;
}
main aside #sidebar__tools h4 {
  margin: 8px 0;
}
main aside #sidebar__tools h4 + h5 {
  margin-top: 0;
}
main aside #sidebar__tools h5 {
  margin-bottom: 0;
}
main aside #sidebar__tools h5 + p {
  margin-top: 4px;
}
main aside #sidebar__tools p {
  font-size: 13px;
  text-align: left;
}
main aside #sidebar__tools ul,
main aside #sidebar__tools ol {
  padding-left: 24px;
  font-size: 13px;
}
main aside #sidebar__tools ul li,
main aside #sidebar__tools ol li {
  position: relative;
  padding-bottom: 6px;
}
main aside #sidebar__tools ul li ul,
main aside #sidebar__tools ol li ul {
  display: none;
  position: absolute;
  top: -8px;
  left: 100%;
  width: 100%;
  padding: 8px;
  padding-left: 32px;
  background: #1f2227;
  z-index: 1;
}
main aside #sidebar__tools ul li:hover ul,
main aside #sidebar__tools ol li:hover ul {
  display: block;
}
main aside #sidebar__tools ul li a,
main aside #sidebar__tools ol li a {
  display: flex;
  justify-content: space-between;
  color: inherit;
}
main aside footer {
  text-align: center;
  border-top: 1px solid #2c2f34;
}
main aside footer p {
  font-size: 12px;
}

#container {
  position: relative;
  display: grid;
}
#container .overlay-elm {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  grid-template-rows: auto 1fr auto;
  color: #222;
  background-color: #FBFBFB;
}
#container .overlay-elm header {
  align-items: center;
  padding: 8px 16px 0;
  text-align: right;
  background-color: transparent;
}
#container .overlay-elm header button {
  padding: 6px;
  border: none;
  background-image: none;
  background-color: transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  cursor: pointer;
}
#container .overlay-elm h2 {
  margin: 0;
  color: #5B9BD5;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
}
#container .overlay__content {
  padding: 15px 24px;
}
#container #ghs-overlay .overlay__content {
  overflow-x: auto;
}
#container #ghs-overlay--tables {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
#container #ghs-overlay--tables h3 {
  margin-top: 0;
  margin-bottom: 25px;
  color: #7030A0;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  word-wrap: break-word;
}
#container #ghs-overlay--tables .ghs-table {
  max-width: 435px;
}
#container #ghs-overlay--tables .ghs-table article {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
#container #ghs-overlay--tables .ghs-table article h4 {
  grid-column: span 2;
  margin: 0;
  padding: 12px;
  font-size: 15px;
  background-color: #D5DCE4;
  border-bottom: 1px solid #4A466E;
}
#container #ghs-overlay--tables .ghs-table article p {
  margin: 0;
  padding: 12px;
  font-size: 14px;
  border-bottom: 1px solid #4A466E;
}
#container #ghs-overlay--tables .ghs-table article p:nth-child(even) {
  border-right: 1px solid #4A466E;
}
#container #ghs-overlay footer {
  padding: 8px;
  text-align: center;
  color: #cfd0d1;
  background: #1f2227;
  border-top: 1px solid #2c2f34;
}
#container #ghs-overlay footer span {
  font-size: 12px;
}
#container #ghs-overlay footer span a {
  color: inherit;
}
#container #datasheet-sites-overlay {
  grid-template-rows: auto 1fr;
}
#container #datasheet-sites-overlay h2 {
  color: #222;
}
#container #datasheet-sites-overlay .overlay__content {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0 24px;
  overflow-y: auto;
}
#container #datasheet-sites-overlay article {
  min-width: 200px;
}
#container #datasheet-sites-overlay article h4 {
  margin: 0;
  margin-bottom: 12px;
  padding: 12px 0 4px;
  font-size: 15px;
  border-bottom: 1px solid #333;
}
#container #datasheet-sites-overlay article ul,
#container #datasheet-sites-overlay article li {
  font-size: 14px;
}
#container #datasheet-sites-overlay article p {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 14px;
}
#container #datasheet-sites-overlay article p a,
#container #datasheet-sites-overlay article p a:visited {
  color: #0066CC;
}

form {
  /* Custom Select Styles with Pure CSS */
  /* @link https: //moderncss.dev/custom-select-styles-with-pure-css/ */
  /* Interim solution until :focus-within has better support */
}
form input {
  padding: 0.25em 0.5em;
  border: 1px solid var(--select-border);
  border-radius: 0.25em;
  font-size: 1.25rem;
  line-height: 1.1;
  background-color: #fff;
  background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
}
form select {
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0 1em 0 0;
  margin: 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;
  /* Stack above custom arrow */
  z-index: 1;
  /* Remove dropdown arrow in IE10 & IE11 */
  /* @link https://www.filamentgroup.com/lab/select-css.html */
  /* Remove focus outline, will add on alternate element */
  outline: none;
}
form select::-ms-expand {
  display: none;
}
form .select {
  display: grid;
  grid-template-areas: "select";
  align-items: center;
  position: relative;
  width: 100%;
  min-width: 15ch;
  border: 1px solid var(--select-border);
  border-radius: 0.25em;
  padding: 0.25em 0.5em;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1.1;
  background-color: #fff;
  background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
  /* Custom arrow */
}
form .select select, form .select::after {
  grid-area: select;
}
form .select:not(.select--multiple)::after {
  content: "";
  justify-self: end;
  width: 0.8em;
  height: 0.5em;
  background-color: var(--select-arrow);
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}
form select:focus + .focus {
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 2px solid var(--select-focus);
  border-radius: inherit;
}
form select[multiple] {
  padding-right: 0;
  /*
   * Safari will not reveal an option
   * unless the select height has room to
   * show all of it
   * Firefox and Chrome allow showing
   * a partial option
   */
  height: 6rem;
}
form select[multiple] option {
  white-space: normal;
  /* Only affects Chrome */
  outline-color: var(--select-focus);
}
form .select--disabled {
  cursor: not-allowed;
  background-color: #eee;
  background-image: linear-gradient(to top, #ddd, #eee 33%);
}
form label {
  font-size: 1.125rem;
  font-weight: 500;
}
form .select + label {
  margin-top: 2rem;
}

.error {
  color: red;
  font-weight: bold;
}

.toastError {
  background: linear-gradient(to right, #f6d365 0%, #fda085 100%);
}
.toastSuccess {
  background: linear-gradient(to right, #9be15d 0%, #00e3ae 100%);
}
.toastWarning {
  background: linear-gradient(to right, #f9d423 0%, #ff4e50 100%);
}
.toastDanger {
  background: linear-gradient(to right, #fc6076 0%, #ff9a44 100%);
}

/*# sourceMappingURL=main.css.map */