.maincolor {
  min-height: 100vh;
  min-width: 100%;
  background-color: oldlace;
  position: absolute;
  top: 0px;
  background: url(../img/oakleaves.jpg) no-repeat center center fixed;
  background-size: cover;
  opacity: 0.85;
}
#formcontainerstart {
  max-width: 800px;
  background: snow;
  margin: auto;
  margin-top: 100px;
  margin-bottom: 0px;
  padding: 20px;
  box-shadow: 0 3px 6px rgb(0 0 0 / 15%), 0 2px 4px rgb(0 0 0 / 12%);
  border-radius: 10px 10px 10px 10px;
  z-index: 1000;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  z-index: 1000;
  gap: 0px;
}
.coverimg {
  max-width: 100%;
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0 3px 6px rgb(0 0 0 / 15%), 0 2px 4px rgb(0 0 0 / 12%);
}
.covercursus {
  grid-column: 1 / 8;
  padding: 10px;
  margin: 0px;
}
.covertext {
  grid-column: 8 / 17;
  padding: 10px;
}
b.price {
  color: maroon;
  text-decoration: line-through;
  font-size: 20px;
}
b.pricereduced {
  color: olivedrab;
  text-decoration: underline;
  font-size: 25px;
  margin-bottom: 0px;
}
p.covertext {
  color: lightslategray;
  font-size: 13px;
  margin-top: 0px;
  margin-bottom: 0px;
  text-align: center;
}
.smallprice {
  color: lightslategray;
  font-size: 12px;
  margin-top: 0px;
  margin-bottom: 10px;
  text-align: center;
}
#countdown {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  z-index: 1000;
  gap: 20px;
  margin-left: 20px;
  margin-right: 20px;
}

.count {
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  font-weight: 500;
  margin: 0px;
  text-align: center;
}
.count2 {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  margin: 0px;
  text-align: center;
}
.days {
  background-color: chocolate;
  color: linen;
  padding-top: 6px;
  padding-bottom: 8px;
  box-shadow: 0 3px 6px rgb(0 0 0 / 15%), 0 2px 4px rgb(0 0 0 / 12%);
  border-radius: 10px 10px 10px 10px;
}
.hours {
  background-color: linen;
  color: darkslategray;
  padding-top: 6px;
  padding-bottom: 8px;
  box-shadow: 0 3px 6px rgb(0 0 0 / 15%), 0 2px 4px rgb(0 0 0 / 12%);
  border-radius: 10px 10px 10px 10px;
}
.minutes {
  background-color: slategray;
  color: antiquewhite;
  padding-top: 6px;
  padding-bottom: 8px;
  box-shadow: 0 3px 6px rgb(0 0 0 / 15%), 0 2px 4px rgb(0 0 0 / 12%);
  border-radius: 10px 10px 10px 10px;
}
.seconds {
  background-color: gold;
  color: darkslategray;
  padding-top: 6px;
  padding-bottom: 8px;
  box-shadow: 0 3px 6px rgb(0 0 0 / 15%), 0 2px 4px rgb(0 0 0 / 12%);
  border-radius: 10px 10px 10px 10px;
}

#formcontainerperson {
  margin: auto;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 20px;
  padding-bottom: 20px;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  z-index: 1000;
  gap: 0px;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
}
#formcontainercompany {
  margin: auto;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 20px;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  z-index: 1000;
  gap: 0px;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
}

.formcontainerlogin {
  margin: auto;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 20px;
  padding-bottom: 20px;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  z-index: 1000;
  gap: 0px;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
}
.formcontaineroverview {
  max-width: 600px;
  background: snow;
  margin: auto;
  margin-top: 0px;
  margin-bottom: 80px;
  padding: 30px;
  padding-top: 20px;
  padding-bottom: 20px;
  box-shadow: 0 3px 6px rgb(0 0 0 / 15%), 0 2px 4px rgb(0 0 0 / 12%);
  border-radius: 10px 10px 10px 10px;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  z-index: 1000;
  gap: 0px;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
}
.formlabel {
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  margin-bottom: 2px;
  color: hsl(169, 20%, 50%);
}
.formlabeldisabled {
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  margin-bottom: 2px;
  color: silver;
}

.reqfield {
  border: 1px solid hsl(169, 20%, 50%);
  background: hsl(43.8, 86.7%, 97%);
}

input {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  border-radius: 3px;
  border: 1px solid silver;
  color: gray;
  background-color: hsl(43.8, 86.7%, 97%);
  height: 30px;
  min-width: 30px;
  padding: 14px 10px 14px 10px;
  margin-bottom: 10px;
}
input:focus {
  outline: none !important;
  border: 1px solid hsl(169, 20%, 50%);
  background-color: mintcream;
  color: hsl(169, 20%, 50%);
  box-shadow: 0 0 5px hsl(169, 20%, 60%);
}

select {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  border-radius: 3px;
  border: 1px solid hsl(60, 90%, 40%);
  color: hsl(60, 90%, 30%);
  background-color: hsl(43.8, 86.7%, 97%);
  height: 30px;
  min-width: 30px;
  margin-bottom: 20px;
  padding-left: 10px;
}
select:focus {
  outline: none !important;
  border: 1px solid hsl(60, 90%, 30%);
  background-color: mintcream;
  color: hsl(60, 90%, 20%);
}
.container .checkmark:after {
  left: 7px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
p.formtitle {
  padding-top: 0px;
  margin-top: 0px;
  margin-bottom: 20px;
  color: hsl(169, 20%, 50%);
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  line-height: 24px;
}
p.formtext {
  padding-top: 0px;
  margin-top: 0px;
  margin-bottom: 20px;
  color: lightslategray;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  line-height: 24px;
}
p.formtextsmall {
  padding-top: 0px;
  margin-top: 0px;
  margin-bottom: 16px;
  color: lightslategray;
  font-size: 14px;
  text-align: center;
  line-height: 18px;
  font-style: italic;
}
p.formhelp {
  color: lightslategray;
  font-size: 13px;
  margin-top: 5px;
  margin-bottom: 5px;
  line-height: 1.5;
}
p.formoverview {
  color: lightslategray;
  font-size: 15px;
  margin-top: 0px;
}
table.formoverview {
  color: lightslategray;
  font-size: 15px;
}
div.arrow {
  text-align: center;
  font-size: 32px;
  margin: 0px;
  padding: 0px;
}
p.arrow {
  margin: 0px;
  padding: 0px;
  color: antiquewhite;
  transform: rotate(90deg);
}
button.entity {
  font-weight: 400;
  color: hsl(169, 20%, 50%);
  cursor: pointer;
  padding: 0px;
  margin-bottom: 5px;
  background-color: hsl(169, 20%, 95%);
  border: 1px solid hsl(169, 20%, 50%);
  font-size: 12px;
  line-height: 1.5;
  border-radius: 0.25rem;
  height: 50px;
  min-width: 100%;
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
}

button.entity:hover {
  background-color: hsl(169, 20%, 60%);
  color: hsl(169, 20%, 95%);
}
button.entity:active {
  padding-top: 4px;
}
button.gray {
  font-weight: 400;
  color: silver;
  cursor: pointer;
  padding: 0px;
  margin-bottom: 5px;
  background-color: white;
  border: 1px solid white;
  font-size: 12px;
  border-radius: 0.25rem;
  height: 50px;
  min-width: 100%;
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
}

button.gray:hover {
  background-color: hsl(169, 20%, 60%);
  border: 1px solid hsl(169, 20%, 60%);
  color: antiquewhite;
}
button.gray:active {
  padding-top: 4px;
}
button.vatbtncheck {
  font-weight: 400;
  color: white;
  cursor: pointer;
  padding: 5px 5px 5px 5px;
  margin-top: 17px;
  background-color: hsl(169, 20%, 55%);
  border: 1px solid hsl(169, 20%, 42%);
  font-size: 14px;
  border-radius: 0.25rem;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
}

button.vatbtncheck:hover {
  background-color: hsl(169, 20%, 42%);
}
button.vatbtncheck:active {
  border: 4px solid darkseagreen;
}

button.vatbtnred {
  font-weight: 400;
  color: white;
  cursor: pointer;
  padding: 5px 5px 5px 5px;
  margin-top: 17px;
  background-color: firebrick;
  border: 1px solid firebrick;
  font-size: 14px;
  border-radius: 0.25rem;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
}

button.red:hover {
  background-color: hsl(169, 20%, 42%);
}
button.red:active {
  border: 4px solid darkseagreen;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  padding: 2px;
  margin-top: 15px;
}
.tooltip:hover {
  background-color: hsl(41, 86%, 84%);
  cursor: pointer;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 100px;
  background-color: peachpuff;
  color: darkslategray;
  text-align: center;
  border-radius: 6px;
  padding: 7px;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -50px;
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 7px;
  border-style: solid;
  border-color: transparent transparent peachpuff transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
.autocomplete {
  z-index: 1000;
  overflow: auto;
  box-sizing: border-box;
}

.autocomplete * {
  font-family: "Montserrat", sans-serif;
}

.autocomplete > div {
  padding: 0 4px;
}

.autocomplete .group {
  background: #eee;
}

.autocomplete > div:hover:not(.group),
.autocomplete > div.selected {
  background: hsl(169, 20%, 42%);
  cursor: pointer;
  color: antiquewhite;
  padding: 5px;
  border-radius: 0.25rem;
}

#tableperson {
  display: block;
}
#tablecompany {
  display: none;
}
#cemail {
  display: none;
}
td.left {
  padding-right: 40px;
}
.formalert {
  max-width: 750px;
}
.alertwarning {
  background-color: hsl(43, 77%, 90%);
  border: 1px solid hsl(43, 77%, 40%);
  color: hsl(43, 77%, 40%);
}
.alertdanger {
  background-color: hsl(360, 77%, 90%);
  border: 1px solid hsl(360, 77%, 38%);
  color: hsl(360, 77%, 38%);
}
.alertsuccess {
  background-color: hsl(84, 77%, 90%);
  border: 1px solid hsl(84, 77%, 38%);
  color: hsl(84, 77%, 38%);
}

.alertinfo {
  background-color: hsl(200, 77%, 90%);
  border: 1px solid hsl(200, 77%, 38%);
  color: hsl(200, 77%, 38%);
}
.alertmodal-xxx {
  display: block;
  position: fixed;
  z-index: 6000;
  top: 50px;
  left: 256px;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 400;
  padding: 18px;
  text-align: center;
  min-width: 500px;
  border-radius: 5pt;
  margin: 10px;
  animation-duration: 1.4s;
  animation-delay: 2s;
  animation-name: fadeout;
  animation-fill-mode: forwards;
}
div:empty {
  display: none;
}

.vatmodal {
  display: none;
  position: fixed;
  z-index: 600;
  top: 274px;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 400;
  padding: 18px;
  text-align: left;
  min-width: 500px;
  border-radius: 5pt;
  margin: 10px;
  animation-duration: 1.4s;
  animation-delay: 2s;
  animation-name: fadeout;
  animation-fill-mode: forwards;
  background-color: hsl(84, 77%, 90%);
  border: 1px solid hsl(84, 77%, 38%);
  color: hsl(84, 77%, 38%);
}
.title {
  grid-column: 1 / 17;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1;
}

.button-person {
  grid-column: 1 / 7;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1;
  margin-bottom: 7px;
}

.button-company {
  grid-column: 8 / 17;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1;
  margin-bottom: 7px;
}

.firstname {
  grid-column: 1 / 6;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2;
}

.lastname {
  grid-column: 7 / 17;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2;
}

.street {
  grid-column: 1 / 17;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2;
}

.email {
  grid-column: 1 / 9;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2;
}

.phone {
  grid-column: 10 / 17;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2;
}

.passwordbutton {
  grid-column: 1 / 9;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stripeformdiv {
  grid-column: 1 / 19;
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 10px;
  opacity: 0.4;
  pointer-events: none;
}

.passwordcopy {
  grid-column: 1 / 17;
  display: grid;
  grid-template-columns: 1fr;
}

.submitbutton {
  grid-column: 1 / 16;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2;
}

.zipcode {
  grid-column: 1 / 4;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2;
}

.czipcity {
  grid-column: 1 / 17;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2;
}

.city {
  grid-column: 5 / 12;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2;
}

.country {
  grid-column: 13 / 17;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2;
}
.next {
  grid-column: 1 / 9;
}

.alertmodal-xxx {
  grid-column: 1 / 17;
  display: grid;
  grid-template-columns: 1fr;
}
div.viastripe {
  text-align: center;
}
/* =========================== */
.cartnextbtn {
  font-weight: 400;
  line-height: 1.2;
  font-family: "Montserrat", sans-serif;
  color: hsl(169, 20%, 42%);
  width: 100%;
  cursor: pointer;
  padding: 2px 5px;
  margin: auto;
  margin-top: 18px;
  background-color: hsl(50, 100%, 50%);
  border: 1px solid hsl(50, 100%, 55%);
  font-size: 15px;
  letter-spacing: 0.05rem;
  border-radius: 0.25rem;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.cartnextbtn:hover {
  color: hsl(169, 20%, 42%);
  background-color: hsl(50, 100%, 55%);
  border: 1px solid hsl(50, 100%, 40%);
}
.cartnextbtn:active {
  padding-top: 6px;
}

.genpassbtn {
  font-weight: 400;
  line-height: 1.2;
  font-family: "Montserrat", sans-serif;
  color: antiquewhite;
  width: 100%;
  cursor: pointer;
  padding: 2px 5px;
  margin: auto;
  margin-top: 18px;
  background-color: hsl(170, 20%, 55%);
  border: 1px solid hsl(170, 20%, 55%);
  font-size: 12px;
  letter-spacing: 0.05rem;
  border-radius: 0.25rem;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.genpassbtn:hover {
  color: hsl(170, 20%, 55%);
  background-color: hsl(170, 20%, 70%);
  border: 1px solid hsl(170, 20%, 55%);
}
.genpassbtn:active {
  padding-top: 6px;
}
div.shoppingcart {
  width: 95vw;
  max-width: 1100px;
  min-height: 60vh;
  margin: auto;
  margin-top: 0px;
  margin-bottom: 30px;
  padding: 0px;
  box-shadow: 0 3px 6px rgb(0 0 0 / 15%), 0 2px 4px rgb(0 0 0 / 12%);
  border-radius: 10px 10px 10px 10px;
  z-index: 1000;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: 1;
  gap: 0px;
  overflow: hidden;
  transition: 200ms transform;
}

.cartleft {
  grid-column: 1 / 9;
  padding: 10px;
  background: hsl(47, 82%, 88%);
}

.cartright {
  grid-column: 9 / 17;
  padding: 10px;
  background: hsl(47, 82%, 95%);
}

hr.cart {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), hsl(170, 20%, 35%), rgba(0, 0, 0, 0));
}

img.cartthumb {
  height: 50px;
  width: 50px;
  background-color: hsl(170, 20%, 35%);
  padding: 1px;
  border-radius: 5px;
  margin-right: 20px;
  margin-left: 10px;
}

.cardimgleft {
  grid-column: 1 / 9;
  padding: 0px;
}

.cardimgright {
  grid-column: 8 / 17;
  padding: 0px;
}

.cardtextright {
  grid-column: 9 / 17;
  padding: 10px;
}

.cardtextleft {
  grid-column: 1 / 8;
  padding: 10px;
}

.cardimg {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 14;
  object-fit: cover;
  object-position: center;
  height: 400px;
  filter: sepia(60%);
}

.containerstart {
  padding-top: 100px;
}

.maincolor2 {
  background-color: hsl(42, 87%, 94%);
}

.cardtitle {
  color: hsl(169, 20%, 35%);
  text-align: center;
  margin: 6px;
  margin-top: 12px;
  margin-bottom: 0px;
  padding-bottom: 0px;
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
  font-size: 28px;
  font-weight: bold;
}

.carttitle {
  color: hsl(169, 20%, 35%);
  text-align: center;
  margin: 6px;
  margin-top: 12px;
  margin-bottom: 15px;
  padding-bottom: 0px;
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  font-weight: 500;
}

.cartempty {
  color: hsl(169, 20%, 43%);
  text-align: center;
  margin: 20px 10px 10px 10px;
  padding-bottom: 0px;
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
}
.cartfilled {
  color: hsl(169, 20%, 43%);
  text-align: center;
  margin: 10px 10px 10px 10px;
  padding-bottom: 0px;
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
}

.cardsubtitle {
  color: hsl(169, 20%, 43%);
  text-align: center;
  margin: 0px 10px 10px 10px;
  padding-bottom: 0px;
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
}

p.card {
  line-height: 1.5;
  max-width: 60rem;
  font-size: 14px;
  color: #666;
  font-weight: 100;
  font-family: "Source Serif Pro", serif;
  text-align: center;
}

p.cart {
  font-size: 14px;
  color: #666;
  font-weight: 100;
  font-family: "Montserrat", sans-serif;
  text-align: center;
  margin: 0px;
}

div.cartitem {
  display: grid;
  grid-template-columns: 1fr 2fr 6fr 2fr 30px;
}
div.cartx {
  display: flex;
  align-items: center;
  justify-content: center;
}
div.cartdeleteitem {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20px;
}
div.cartprice {
  display: grid;
  align-items: center;
  justify-content: right;
  margin-right: 10px;
}
div.cartname {
  display: grid;
  grid-template-rows: 2;
  margin-left: 10px;
}
div.carttopay {
  display: grid;
  align-items: center;
  justify-content: left;
}
div.cartimage {
  width: 100%;
  height: 100%;
}
div.cartcheckout {
  width: 100%;
  height: 100%;
  padding: 10px;
}
img.cartimage {
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: sepia(30%);
  border-radius: 0px 10px 10px 0px;
}

i.cartx {
  font-size: 13px;
  font-style: normal;
}
i.cartname {
  font-size: 18px;
  font-weight: 500;
  font-style: normal;
  text-align: left;
}
i.cartsubtitle {
  font-size: 15px;
  font-style: normal;
  text-align: left;
}
i.cartprice {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
}
i.carttotalprice {
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
}

.trash {
  color: #853435;
  font-size: 14px;
  text-decoration: none;
}
.trash:hover {
  color: red;
  cursor: pointer;
}
.trash:active {
  padding-top: 2px;
}
.accordion {
  background-color: hsl(49, 78%, 88%);
  color: hsl(169, 20%, 43%);
  padding: 12px;
  margin: 5px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  transition: 0.4s;
  font-size: 15px;
  font-weight: 500;
  border-bottom: 0px solid hsl(169, 20%, 43%);
  border-radius: 5px;
}

.checked:after {
  content: "\2713 \00a0 ok";
  color: green;
  font-weight: bold;
  float: right;
  margin-right: 10px;
  font-size: 14px;
  display: block;
}

.activex {
  background-color: hsl(49, 78%, 80%);
}

.clickx {
  cursor: pointer;
}

.clickx:hover {
  background-color: hsl(49, 78%, 72%);
}