/******************************************
/* CSS
/*******************************************/

/* Box Model Hack */
* {
  box-sizing: border-box;
  /* color: #060F1D; */
}

/******************************************
/* LAYOUT
/*******************************************/
body {
  background-color: azure;
}

.receipt {
  background: linear-gradient(45deg,#5d00ff, #7a00ff, #ff00c8);
}

/******************************************
/* ADDITIONAL STYLES
/*******************************************/

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #FDF8E0; 
  color: black;
  border-bottom: 1px solid #d4d4d4; 
}

.autocomplete-items div:hover {
  background-color: #9F8C86; 
  color: white;
}

.err {
  font-family: "Gloria Hallelujah", cursive;
  font-weight: 600;
  font-style: normal;
}

.text-corn {
  color: #FDF8E0;
}

.text-rich {
  color: #060F1D;
}

.text-jasper {
  color: #CF5D51;
}

.text-cine {
  color: #9F8C86;
}

.btn-white {
  background-color: white;
  color: black;
}
.btn-white:hover {
  background-color: #FDF8E0;
  color: black;
}

.btn-corn {
  background-color: #FDF8E0;
  color: black;
}
.btn-corn:hover {
  background-color: #CF5D51;
  color: white;
}
.btn-corn:checked {
  background-color: #CF5D51;
  color: white;
}

.btn-rich {
  background-color: #060F1D;
}

.btn-jasper {
  background-color: #CF5D51;
  color: white;
}
.btn-jasper:hover {
  background-color: #FDF8E0;
  color: black;
}

.btn-cine {
  background-color: #9F8C86;
  color: white;
}
.btn-cine:hover {
  background-color: #FDF8E0;
  color: black;
}


.bg-white {
  background-color: white;
  color: black;
}
.bg-corn {
  background-color: #FDF8E0;
  color: black;
}
.bg-rich {
  background-color: #060F1D;
}
.bg-jasper {
  background-color: #CF5D51;
  color: white;
}
.bg-cine {
  background-color: #9F8C86;
  color: white;
}

.form-check-input:checked {
  background-color: #CF5D51;
  color: white;
  border: none;
}

/******************************************
/* RESPONSIVE STYLES
/*******************************************/

/* Created based off Stack Overflow: https://stackoverflow.com/questions/46412541/applying-borders-on-elements-depending-on-device-size-with-bootstrap#:~:text=My%20version%20for%20CSS%2C%20compiled%20version%3A */
@media (min-width: 576px) {
  .rounded-sm-bottom-0 {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .rounded-sm-bottom-5 {
    border-bottom-left-radius: 32px !important;
    border-bottom-right-radius: 32px !important;
  }
  .rounded-sm-end-0 {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .rounded-sm-end-5 {
    border-top-right-radius: 32px !important;
    border-bottom-right-radius: 32px !important;
  }
}

@media (min-width: 768px) {
  .rounded-md-bottom-0 {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .rounded-md-bottom-5 {
    border-bottom-left-radius: 32px !important;
    border-bottom-right-radius: 32px !important;
  }
  .rounded-md-end-0 {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .rounded-md-end-5 {
    border-top-right-radius: 32px !important;
    border-bottom-right-radius: 32px !important;
  }
}

@media (min-width: 992px) {
  .rounded-lg-bottom-0 {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .rounded-lg-bottom-5 {
    border-bottom-left-radius: 32px !important;
    border-bottom-right-radius: 32px !important;
  }
  .rounded-lg-end-0 {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .rounded-lg-end-5 {
    border-top-right-radius: 32px !important;
    border-bottom-right-radius: 32px !important;
  }
}