/* -------------------------------- 

Primary style
<!-- https://css-tricks.com/box-sizing/  good box-sizing reference --> 

-------------------------------- */

/* Universal Box Sizing with Inheritance & Vendor Prefixes */
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

/*
You can change these values to make it look nicer

*/

body {
  /*font-size: 1.6rem;*/
  font-family: 'PT Sans', sans-serif;
  /*font-family: 'Courier New', Courier, monospace;*/

  color: #505260;
  background-color: #2fb5dd;
}

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

/* Navbar */

/* ---------- Modal   -------------  */
.cd-signin-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(52, 54, 66, 0.9);
  z-index: 3;
  overflow-y: auto;
  cursor: pointer;

  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.3s, visibility 0.3s;
  transition: opacity 0.3s, visibility 0.3s;
}

.cd-signin-modal.cd-signin-modal--is-visible {
  visibility: visible;
  opacity: 1;
}

/* This controls the size of the sign in box */
.cd-signin-modal__container {
  position: relative;
  width: 90%;
  max-width: 600px;
  background: #fff;
  margin: 3em auto 4em;
  cursor: auto;
  border-radius: 0.25em;
  -webkit-transform: translateY(-30px);
  -ms-transform: translateY(-30px);
  transform: translateY(-30px);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.cd-signin-modal--is-visible .cd-signin-modal__container {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.cd-signin-modal__switcher:after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}

.cd-signin-modal__switcher li {
  width: 50%;
  float: left;
  text-align: center;
}

.cd-signin-modal__switcher li:first-child a {
  border-radius: 0.25em 0 0 0;
}

.cd-signin-modal__switcher li:last-child a {
  border-radius: 0 0.25em 0 0;
}

.cd-signin-modal__switcher a {
  display: block;
  width: 100%; /*controls the size of the background area */
  height: 50px;
  line-height: 50px;
  /* this is the inactive background color
  background: #d2d8d8; */
  background: blue;
  /* this is the inactive text color */
  /* color: #809191; */
  color: red;
}

.cd-signin-modal__switcher a.cd-selected {
  /* this is the active state top dialog tab color */
  background: coral;
  /* background: #fff; */
  color: #505260;
}

@media only screen and (min-width: 600px) {
  .cd-signin-modal__container {
    margin: 4em auto;
  }
  .cd-signin-modal__switcher a {
    height: 70px;
    line-height: 70px;
  }
}

.cd-signin-modal__form {
  /* padding: 1.4em; */
  padding: 1.4em;
}

.cd-signin-modal__fieldset {
  position: relative;
  margin: 1.4em 0;
}

.cd-signin-modal__fieldset:first-child {
  margin-top: 0;
}

.cd-signin-modal__fieldset:last-child {
  margin-bottom: 0;
}

.cd-signin-modal__label {
  font-size: 1.4rem;
}

.cd-signin-modal__label.cd-signin-modal__label--image-replace {
  /* replace text with an icon */
  display: inline-block;
  position: absolute;
  left: 15px;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 20px;
  width: 20px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  color: transparent;
  background-repeat: no-repeat;
  background-position: 50% 0;
}

.cd-signin-modal__label.cd-signin-modal__label--username {
  background-image: url('../img/cd-icon-username.svg');
}

.cd-signin-modal__label.cd-signin-modal__label--email {
  background-image: url('../img/cd-icon-email.svg');
}

.cd-signin-modal__label.cd-signin-modal__label--password {
  background-image: url('../img/cd-icon-password.svg');
}

.cd-signin-modal__input {
  margin: 0;
  padding: 0;
  border-radius: 0.2 em;
  /* border-radius: 1.5em; */ /* this makes the box edges curve */
}

.cd-signin-modal__input.cd-signin-modal__input--full-width {
  width: 100%;
}

.cd-signin-modal__input.cd-signin-modal__input--has-padding {
  padding: 12px 20px 12px 50px;
}

.cd-signin-modal__input.cd-signin-modal__input--has-border {
  border: 1px solid #d2d8d8;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.cd-signin-modal__input.cd-signin-modal__input--has-border:focus {
  border-color: #343642;
  -webkit-box-shadow: 0 0 5px rgba(52, 54, 66, 0.1);
  box-shadow: 0 0 5px rgba(52, 54, 66, 0.1);
  outline: none;
}

.cd-signin-modal__input.cd-signin-modal__input--has-error {
  border: 1px solid #d76666;
}

.cd-signin-modal__input[type='submit'] {
  padding: 16px 0;
  cursor: pointer;
  background: #2f889a;
  color: #fff;
  font-weight: bold;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cd-signin-modal__input[type='submit']:hover,
.cd-signin-modal__input[type='submit']:focus {
  background: #3599ae;
  outline: none;
}

/* This block constrols the hide/show password */
.cd-signin-modal__hide-password {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  padding: 6px 15px;
  /*border-left: 1px solid #d2d8d8;*/
  border-left: 1px solid coral;
  background: cornflowerblue; /* New */
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  /*font-size: 1.4rem; */ /* fix this */
  /* color: #343642;*/
  color: red;
}

.cd-signin-modal__error {
  display: inline-block;
  position: absolute;
  left: -5px;
  bottom: -35px;
  background: rgba(215, 102, 102, 0.9);
  padding: 0.8em;
  z-index: 2;
  color: #fff;
  font-size: 1.3rem;
  border-radius: 0.25em;
  /* prevent click and touch events */
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  transition: opacity 0.2s 0s, visibility 0s 0.2s;
}

.cd-signin-modal__error::after {
  /* triangle */
  content: '';
  position: absolute;
  left: 22px;
  bottom: 100%;
  height: 0;
  width: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid rgba(215, 102, 102, 0.9);
}

.cd-signin-modal__error.cd-signin-modal__error--is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.2s 0s, visibility 0s 0s;
  transition: opacity 0.2s 0s, visibility 0s 0s;
}

@media only screen and (min-width: 600px) {
  .cd-signin-modal__form {
    padding: 2em;
  }
  .cd-signin-modal__fieldset {
    margin: 2em 0;
  }
  .cd-signin-modal__fieldset:first-child {
    margin-top: 0;
  }
  .cd-signin-modal__fieldset:last-child {
    margin-bottom: 0;
  }
  .cd-signin-modal__input.cd-signin-modal__input--has-padding {
    padding: 16px 20px 16px 50px;
  }
  .cd-signin-modal__input[type='submit'] {
    padding: 16px 0;
  }
}

.cd-signin-modal__message {
  padding: 1.4em 1.4em 0;
  font-size: 1.4rem;
  line-height: 1.4;
  text-align: center;
}

@media only screen and (min-width: 600px) {
  .cd-signin-modal__message {
    padding: 2em 2em 0;
  }
}
/* This controls the forgot login and back to log-in*/
.cd-signin-modal__bottom-message {
  position: absolute;
  width: 100%;
  left: 0;
  /*  bottom: -30px; */
  bottom: -50px;
  text-align: center;
  font-size: 1.4rem;
}

/* I dont know why this works */
ul {
  list-style-type: none;
}

/* this does not work */
/* .noBullet {
  list-style-type: none;
} */

.cd-signin-modal__bottom-message a {
  color: #fff;
  text-decoration: underline;
}
/*form X button on top right */
.cd-signin-modal__close {
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  right: 0;
  top: -40px;
  background: url('../img/cd-icon-close.svg') no-repeat center center;
  color: transparent;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

@media only screen and (min-width: 1170px) {
  .cd-signin-modal__close {
    display: none;
  }
}

.cd-signin-modal__block {
  display: none;
}

.cd-signin-modal__block.cd-signin-modal__block--is-selected {
  display: block;
}

/* Advertisement Form */
.advertisement-entries {
  background-color: cadetblue;
  width: 100%;
  height: 100%;
  border: 10px solid;
  padding: 10px;
  margin: 5px;
}

.ad-entry {
  background-color: cornflowerblue;
}

/* This section is just for my demo items */
.demo-box {
  background-color: #343642;
  margin: auto;
  margin-bottom: 10px;

  width: 70%;
  height: 50%;
  border: 3px solid;
  border-color: red;
  padding: 20px;
}

.click-me {
  margin: auto;

  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  text-align: center;
}

.click-me a {
  color: #d2d8d8;
}

.demo-box-new {
  background-color: #e2d522;
  color: blue;
  margin: auto;
  margin-bottom: 10px;

  width: 70%;
  height: 50%;
  border: 3px solid;
  border-color: red;
  padding: 20px;
}
p.new {
  /* background-color: blue; */
  color: red;
}
.click-me-new a {
  color: #d3d2d8;
  color: red;
}
/*
body {

  font-family: 'PT Sans', sans-serif;


  color: #505260;
  background-color: white;
}*/

/* My new dynamic form 2020-09-15 */

#adcontrols {
  background-color: greenyellow;
  margin: auto;
  border: solid;
  padding: 20px;
}

.add-cell-button {
  margin: auto;
  border: solid;
  border-color: black;
  color: red;
}

.qtyplus {
  margin: auto;
  border: solid;
  border-color: black;
  color: red;
}

#grid-col {
  border: solid;
  margin-top: 10px;
}

/* #deleteAd_0 {
  margin: auto;

  border: solid;
} */

.deleteBox {
  margin: auto;
  border: solid;
}

.row {
  border: solid;
  margin: auto;
  border-color: orangered;
  padding-top: 10px;
}

.cssCircle:hover {
  background: #3f69a0;
  cursor: pointer;
}

.minusSign {
  line-height: 0.9em;
  margin-bottom: 1px;
}

.plusSign {
  line-height: 1.1em;
}

.minusSign:hover,
.plusSign:hover {
  color: white;
}

/* p {
  width: 20%;
  color: red;
  height: 100%;
  border: 10px solid;
  padding: 10px;
  margin: 5px;
} */