/* TLD Admin base styles */

html {
  scroll-behavior: smooth;
  position: relative;
  min-height: 100%;
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 60px;
  /* Margin bottom by footer height */
}

.container {
  max-width: 960px;
}

.drop-shadow {
  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

.pricing-header {
  max-width: 700px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  /* Set the fixed height of the footer here */
  line-height: 60px;
  /* Vertically center the text there */
  background-color: #f5f5f5;
}

section {
  padding-top: 50px;
  padding-bottom: 50px;
}

section h1 {
  text-transform: uppercase;
  font-weight: 500;
  color: blueviolet;
  text-align: left;
  margin-bottom: 20px;
}

section p {
  font-size: 16px;
  font-weight: 300;
}

button {
  max-width: 50%;
  border-radius: 10px !important;
}

.custom-tooltip {
  --bs-tooltip-bg: var(--bd-violet-bg);
  --bs-tooltip-color: var(--bs-white);
}

div .warning {
  background-color: bisque;
  padding: 1.0em;
  border-radius: 6px;
  float: right;
}

#db-warning::before {
  content: "\F33A";
  font-family: 'Bootstrap-icons';
  font-size: large;
  color: rgb(156, 75, 0);
  padding-inline-end: .5em;
  background-color: transparent;
}

#messages-list {
  padding-left: 0.5em;
  padding-right: 0.5em;
  background-color: #ffc5c5;
}

#hero .col {
  justify-content: center;
  flex-direction: column;
  display: flex;
}

#hero .img-col {
  justify-content: flex-end;
  margin-top: 80px;
}

#hero img {
  max-width: 120% !important;
  width: 100%;
}

#hero .card {
  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  border: 1px solid #f9f9f9;
  text-align: center;
}

#hero .icon {
  width: 50px;
  height: 50px;
  margin-bottom: 20px;
}

#about-us .col {
  justify-content: center;
  flex-direction: column;
  display: flex;
}

#about-us .img-col {
  justify-content: flex-start;
  margin-top: 80px;
}

#about-us img {
  max-width: 100% !important;
  width: 85%;
}

#contact {
  text-align: center;
  /* background-color: darkgrey; */
  color: white;
  margin-bottom: 50px;
}

#contact h1 {
  text-align: center;
  color: white;
}

.logo {
  max-height: 80px;
  height: 50px;
}

/* === FORM INPUT-GROUP === */

.input-group input,
.input-group textarea {
  width: 100%;
  height: 44px;
  border: 2px solid;
  padding-left: 44px;
  padding-right: 12px;
  position: initial;
  font-size: 16px;
}

.input-group textarea {
  padding-top: 8px;
  height: 130px;
  resize: none;
}

.input-group.default input,
.input-group.default textarea {
  border-color: #a4a4a4;
  color: #6c6c6c;
}

.input-group i {
  position: absolute;
  top: 11px;
  left: 13px;
  font-size: 20px;
  z-index: 9;
}

.input-group.default i {
  color: #6c6c6c;
}

/* === FORM INPUT-ITEMS === */

.input-items {
  position: relative;
}

.input-items input,
.input-items textarea {
  width: 100%;
  height: 44px;
  border: 2px solid;
  padding-left: 44px;
  padding-right: 12px;
  position: initial;
  font-size: 16px;
}

.input-items textarea {
  padding-top: 8px;
  height: 130px;
  resize: none;
}

.input-items.default input,
.input-items.default textarea {
  border-color: #a4a4a4;
  color: #6c6c6c;
}

.input-items i {
  position: absolute;
  top: 11px;
  left: 13px;
  font-size: 20px;
  z-index: 9;
}

.input-items.default i {
  color: #6c6c6c;
}


/* === FORM CUSTOM VALIDATION PSEUDO CLASSES AND PSEUDO ELEMENTS === */

/* --- Invalid input state --- */
.input-items.default input:invalid,
.input-items.default input:required:invalid,
.input-items.default input[value=""]:invalid,
.input-group.default input:invalid,
.input-group.default input:required:invalid,
.input-group.default input[value=""]:invalid,
.form-control:placeholder-shown:invalid,
.form-control::placeholder {
  color: red;
  opacity: 1;
}

/* --- Valid input state --- */
.input-items.default input:valid,
.input-items.default input:required:valid,
.input-items.default input:not([value=""]):valid,
.input-group.default input:valid,
.input-group.default input:required:valid,
.input-group.default input:not([value=""]):valid {
  color: green;
  opacity: 1;
}

/* --- Change Bootstrap Icon color to red for invalid state --- */
input:invalid~i.bi,
input[type="text"]:invalid~i.bi,
input[type="url"]:invalid~i.bi {
  color: red;
  opacity: 1;
}

/* --- Change Bootstrap Icon color to green for valid state --- */
input:valid~i.bi,
input[type="text"]:valid~i.bi,
input[type="URL"]:valid~i.bi {
  color: green;
  opacity: 1;
}


/* === ATTRIBUTIONS === */

/* --- Attribution text in p element --- */

.attribution p {
  font-size: smaller;
}