/* 
Primary color: #ffde00;
Secondary color: #018752;
tertiary color: #00587b;
*/

:root {
  /* Primary color */
  --color-brand--1: #40b2b8;
  /* secondary color */
  --color-brand--2: #000;
  /* tertiary shade */
  --color-brand--3: #266b6e;

  /* Mobile selection - dark and light shades*/
  --color-mobile--1: #00ced1;
  --color-mobile--2: #e0ffff;

  /* Smiley face colors */
  --color-darkgreen--1: #26f726;
  --color-lightgreen--1: #96d73a;
  --color-yellow--1: #f7c308ec;
  --color-orange--1: #ffa500;
  --color-red--1: #ff0000;

  /* Shades of black and white */
  --color-dark--1: #000;
  --color-dark--2: #111;
  --color-light--1: #fff;
  --color-light--2: #b3b3b3;

  /* Other colors used - Green tick */
  --color-green-tick: #018752;
  --color-red-tick: #c41230;

  /* Star checking color */
  --color-star-check: #ffde00;
}

* {
  margin: 0;

  padding: 0;

  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  overflow: hidden;

  background-color: var(--color-light--1);

  font-family: sans-serif;

  color: var(--color-dark--1);

  line-height: 1;

  font-weight: 400;

  margin-top: 14.8rem;
}

/* Mobile layout - vertical with boundaries */

.grid-item {
  display: grid;

  grid-template-columns: 1fr 2fr;

  align-items: center;

  justify-items: center;

  border: 2px solid var(--color-dark--1);

  border-radius: 9px;

  transition: all 0.4s ease-in-out;

  width: 70vw;

  /* height: 7vh; */
}

.grid-icon {
  padding: 0.5rem 0;

  font-size: 1.8rem;
}

.grid-tooltip {
  font-size: 2.4rem;

  justify-self: flex-start;

  font-weight: 600;
}

.grid-item:hover {
  transform: scale(1.1);

  border-color: var(--color-mobile--1);
}

.grid-item.select {
  transform: scale(1.1);
}

.grid-item.select:hover {
  transform: scale(1.15);
}

fieldset .grid-item.select {
  border: 4px solid var(--color-mobile--1);

  background-color: var(--color-mobile--2);
}

fieldset .grid-item.select .field-input-label .icon-color.no {
  color: var(--color-red-tick);
}

fieldset .grid-item.select .field-input-label .icon-color.yes {
  color: var(--color-green-tick);
}

/********************************/

/* General  */

/********************************/

.grid {
  display: grid;

  row-gap: 2.5rem;

  grid-template-rows: 1fr 2fr 1fr;

  align-items: center;

  height: 60vh;
}

.grid--5-cols {
  grid-template-columns: repeat(5, 1fr);
}

.grid--justifyself-center {
  justify-self: center;
}

.flex-box {
  display: flex;

  margin: 0 2.4rem;
}

.flex-container {
  display: flex;
}

.flex-row {
  display: flex;

  justify-content: space-around;
}

.flex-gap--1rem {
  gap: 1rem;
}

.flex-gap--2rem {
  gap: 2rem;
}

.flex-gap--3rem {
  gap: 3rem;
}

.flex-card {
  max-width: 32rem;
}

.flex-item {
  display: flex;

  flex-direction: column;
}

.flex-align {
  align-items: center;

  justify-content: center;
}

.radio-check {
  flex: 1;

  text-align: center;
}

.flex-column {
  display: flex;

  flex-direction: column;
}

/* selects elements that have both navbar-text and flex-column */

.navbar-text.flex-column {
  gap: 0.8rem;
}

.radio-check.flex-column {
  gap: 3.4rem;
}

.margin-lg {
  margin: 5rem 3.2rem 27rem 3.2rem;
}

.margin-md {
  margin: 6.4rem !important;
}

.margin-top-lg {
  margin-top: 12.8rem !important;
}

.margin-top-md {
  margin-top: 4.8rem !important;
}

.margin-top-sm {
  margin-top: 1.8rem;
}

.margin-top-x-sm {
  margin-top: 0.8rem;
}

.margin-x-sm {
  margin: 0 2.4rem !important;
}

.margin-x-md {
  margin: 0 4.8rem !important;
}

.margin-y-md {
  margin: 4.8rem 0 !important;

  /* margin: 1.2rem 0 !important; */
}

.margin-y-sm {
  /* margin: 4.8rem 0 !important; */

  margin: 1.2rem 0 !important;
}

.margin-btm-md {
  margin-bottom: 6.4rem !important;
}

.margin-btm-lg {
  margin-bottom: 12.8rem !important;
}

.padding-x-lg {
  padding: 0 6.4rem;
}

.padding-x-sm {
  padding: 0 2.4rem;
}

.btn-hidden {
  visibility: hidden;

  opacity: 0;

  pointer-events: none;
}

.btn-visible {
  visibility: visible;

  opacity: 1;

  pointer-events: all;
}

.laptop-view {
  visibility: visible;

  opacity: 1;

  pointer-events: all;
}

.mobile-view {
  display: none;
}

/********************************/

/* Nav Bar

/********************************/

.auto-margin {
  /* margin: 1.2rem 3.6rem; */

  margin: 1.2rem 3.4rem;
}

.navbar {
  margin: 0 3.2rem !important;

  padding: 1.5rem 0;
}

.navbar-brand {
  margin-right: 0;
}

.navbar-logo {
  height: 8rem;

  /* height: 6.6rem; */
}

.navbar-exit-btn {
  font-weight: 600;

  width: 10rem;

  color: var(--color-brand--2);

  text-transform: uppercase;

  font-size: 2.4rem;

  border: 0 none;

  border-radius: 9rem;

  cursor: pointer;

  padding: 1rem 2rem;

  background-color: var(--color-brand--1);
  margin-left: 7rem;
}

.navbar-exit-btn:hover {
  background-color: var(--color-brand--1);

  color: var(--color-light--1);

  width: 10rem;

  padding: 1rem 2rem;

  border: 0 none;
}

.navbar-mainheading,
.navbar-secheading {
  text-transform: uppercase;

  font-weight: 600;

  color: var(--color-dark--1);
}

.navbar-childheading,
.navbar-secchildheading {
  font-weight: 600;

  color: #c41230;
}

.navbar-mainheading {
  font-size: 3.6rem;
}

.navbar-childheading {
  font-size: 1.8rem;
}

.navbar-secheading,
.navbar-secchildheading {
  display: none;
}

/********************************/

/* ProgressBar  */

/********************************/

.progress-bar {
  height: 2.5rem;

  border-radius: 50rem;
}

.progress-indicator {
  width: 65%;

  position: fixed;

  font-weight: 600;

  border: 3px solid var(--color-dark--1);

  border-radius: 50rem;

  z-index: 3;

  background-color: var(--color-light--1);
}

.progress-text {
  color: var(--color-brand--2);

  font-size: 2rem;
}

/********************************/

/* Body */

/********************************/

.help-text {
  font-size: 2rem;

  font-style: italic;
}

fieldset {
  background: var(--color-light--1);

  border: 0 none;

  box-sizing: border-box;

  width: 100%;
}
#hospice-form input:focus,
#hospice-form textarea:focus {
  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;

  box-shadow: none !important;

  border: 3px solid var(--color-dark--1);

  outline-width: 0;
}

.note-text {
  font-size: 2.4rem;

  font-weight: 600;

  font-style: italic;

  color: var(--color-brand--2);
}

/* .textbox-input:focus {

  border-color: cadetblue;

} */

/*Next Buttons*/

.action-button {
  width: 15rem;

  background: var(--color-brand--1);

  color: var(--color-brand--2);

  border: 0 none;

  border-radius: 9rem;

  padding: 1.6rem 2.8rem;

  font-size: 2.4rem;

  font-weight: 600;

  text-transform: uppercase;
}

#hospice-form .action-button:hover,
#hospice-form .action-button:focus {
  background-color: var(--color-brand--1);

  color: var(--color-light--1);

  border: 0 none;

  width: 15rem;

  /* color: black; */

  transition: all 0.3s ease-in-out;
}

/*Previous Buttons*/

#hospice-form .action-button-previous {
  width: 15rem;

  background: var(--color-brand--1);

  font-weight: 600;

  color: var(--color-brand--2);

  border: 0 none;

  padding: 1.6rem 2.8rem;

  border-radius: 9rem;

  font-size: 2.4rem;

  text-transform: uppercase;
}

#hospice-form .action-button-previous:hover,
#hospice-form .action-button-previous:focus,
.service-choice:hover,
.service-choice:focus {
  background-color: var(--color-brand--1);
  border: 0 none;
  color: var(--color-light--1);
}

.button-class {
  display: flex;
}

.hospice-card {
  z-index: 0;

  border: none;

  position: relative;
}

/*FieldSet headings*/

.fs-title {
  font-size: 3.2rem;

  color: var(--color-brand--3);

  font-weight: 700;
}

.fs-section {
  font-size: 3.2rem;

  color: var(--color-brand--2);

  font-weight: 500;
}

.fs-declaration {
  font-weight: 400;

  font-size: 2.6rem;

  color: var(--color-dark--1);

  text-align: justify;
}

/*Step Count*/

.steps {
  font-size: 2.8rem;

  color: var(--color-brand--3);

  /* margin-bottom: 10px; */

  font-weight: 300;

  text-align: right;
}

/*Field names*/

.fieldlabel {
  color: var(--color-dark--1);

  font-size: 2.6rem;

  font-weight: 600;

  line-height: 1.2;

  text-align: justify;
}

.textbox-input {
  border: inset 3px var(--color-dark--1);

  font-size: 2.4rem;

  width: 70vw;

  height: 25vh;

  padding: 1rem;
}

/* .textbox-input:focus {

  outline: none;

  box-shadow: none;

} */

.hospice-card h5 {
  margin-bottom: 10px;

  font-size: 25px;

  font-weight: 700;
}

.field-input {
  display: none;
}

.field-input-label {
  cursor: pointer;

  /* font-size: 2.8rem; */

  font-size: 12rem;
}

.field-input-tooltip {
  display: hidden;

  opacity: 0;

  color: var(--color-dark--1);

  font-size: 2.6rem;

  font-weight: 500;
}

/* space between smilies and arrows */

.field-input-label:hover + .flex-tooltip {
  visibility: visible;

  opacity: 1;
}

.field-input-label:hover + .field-input-tooltip {
  /* transform: scale(1); */

  display: inline;

  opacity: 1;

  /* transition: transform 0.3s ease-in-out; */
}

.radio-check.select > .field-input-label {
  transform: scale(1.4);

  transition: all 0.3s ease-in-out;
}

.radio-check.select > .field-input-tooltip {
  display: inline;

  opacity: 1;
}

.form-check-label {
  cursor: pointer;

  padding-left: 1px;

  padding-right: 1px;

  margin-bottom: 50px;

  font-size: 30px;

  margin-top: 20px;

  display: block;
}

a.btn-link {
  text-decoration: none;

  background: var(--color-brand--1);

  color: var(--color-light--1);

  padding: 15px 25px;

  border-radius: 18px;

  /* vw vh */

  font-size: 22px;

  line-height: 1;

  min-width: 150px;

  font-weight: 500;
}

.fit-image {
  width: 100%;

  object-fit: cover;
}

.happy-dark-green-laugh {
  color: var(--color-darkgreen--1);

  /* font-size: 4em;

  font-size: 2em; */

  cursor: pointer;

  /* position: relative;*/
}

.happy-light-green-smile {
  color: var(--color-lightgreen--1);

  /* font-size: 4em;

  font-size: 2em; */

  cursor: pointer;
}

/* To scale element when hovered */

.fa-hover:hover {
  transform: scale(1.4);

  transition: transform 0.3s ease-in-out;
}

/* selects elements with class field-input-label that is a direct child of element with

both classes radio-check and select */

/* Finally selects elements with fa-hover class under field-input-label */

.radio-check.select > .field-input-label .fa-hover:hover {
  transform: scale(1.15);

  transition: transform 0.3s ease-in-out;
}

.yellow-face-meh {
  color: var(--color-yellow--1);

  /* text-shadow: 1px 1px 1px #ccc; */

  /* font-size: 4em;

  font-size: 2em; */

  cursor: pointer;
}

.orange-frown-slight {
  color: var(--color-orange--1);

  /* text-shadow: 1px 1px 1px #ccc; */

  /* font-size: 4em;

  font-size: 2em; */

  cursor: pointer;
}

.red-face-angry {
  color: var(--color-red--1);

  /* text-shadow: 1px 1px 1px; */

  /* font-size: 4em;

  font-size: 2em; */

  cursor: pointer;
}

header.headerSeactio {
  margin-top: 100px;

  box-shadow: 0 2px 3px rgb(0 0 0 / 15%);
}

.navbar-color {
  background-color: var(--color-light--1);
}

h1.logo img {
  max-width: 200px;
}

/* .starBox {

  font-size: 2rem;

  justify-content: space-evenly;

} */

h2.survey-title {
  font-size: 30px;

  color: #231f20;

  margin-bottom: 15px;

  text-transform: uppercase;

  font-weight: 700;
}

h2.exit-title {
  margin-left: 150px;

  color: var(--color-dark--1);

  text-transform: uppercase;

  font-weight: 700;
}

.submit-form {
  font-weight: 600;

  width: 16rem;

  background: var(--color-brand--1);

  color: var(--color-brand--2);

  border: 0 none;

  border-radius: 9rem;

  text-transform: uppercase;

  font-size: 2.4rem;

  text-decoration: none;

  padding: 1.4rem 2.8rem;
}

.submit-form:hover {
  background-color: var(--color-brand--1);

  color: var(--color-light--1);

  border: 0 none;

  width: 16rem;

  /* color: black; */
}

.bg-changed-yellow {
  background-color: var(--color-brand--1);

  /* color: var(--color-brand--3); */
}

.bg-changed-green {
  background-color: var(--color-lightgreen--1);

  /* color: var(--color-brand--1); */
}

.starchecked {
  color: var(--color-star-check);
}

.starwhite {
  color: #c7c7c7;

  opacity: 0.7;
}

.fa-5x {
  font-size: 15rem !important;
}

/* Pop up styles */

.model-container {
  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 100vh;

  width: 100vw;

  position: fixed;

  left: 50%;

  transform: translate(-50%, -50%) scale(0.1);

  visibility: hidden;

  transition: transform 0.4s, top 0.4s;
}

.open-popup {
  visibility: visible;

  top: 55%;

  transform: translate(-50%, -50%) scale(1);
}

.model-container .model {
  height: 30rem;

  max-width: 45rem;

  margin: 0 1rem;

  border: 2px solid var(--color-dark--1);

  background: #c7c7c7;

  border-radius: 11px;

  text-align: center;

  display: flex;

  flex-direction: column;

  gap: 2rem;

  z-index: 999;
}

.model-container .model p {
  color: var(--color-dark--1);

  font-size: 1.8rem;

  padding: 0 2rem;
}

.model-container .model h2 {
  color: var(--color-dark--1);

  font-size: 2.4rem;

  text-transform: uppercase;

  padding: 0 1rem;
}

.model-container .model img {
  width: 7rem;

  height: auto;

  border-radius: 9px;

  box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.3);
}

.user-large {
  font-size: 7rem;
  color: var(--color-green-tick);
}

.logo-color {
  color: var(--color-brand--3);
}

.model-container .model button {
  width: 12rem;

  background: var(--color-brand--1);

  color: var(--color-brand--2);

  border: 0 none;

  border-radius: 9rem;

  cursor: pointer;

  padding: 1.2rem 2.4rem;

  font-size: 1.8rem;

  font-weight: 600;

  text-transform: uppercase;

  box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.3);
}

.model-container .model button:hover {
  background-color: var(--color-brand--1);

  color: var(--color-light--1);
}

.greeting-text {
  font-size: 3.2rem;

  padding: 2.4rem 1.2rem;

  text-align: center;

  color: var(--color-brand--3);
}

.subnote {
  font-size: 2.8rem;

  color: var(--color-brand--2);
}

/********************************/

/* Footer  */

/********************************/

.flex-footer {
  text-align: center;

  font-size: 1.6rem;

  padding: 1.6rem 0;
}

.copyright {
  align-self: center;
}

.flex-card-container {
  display: flex;
}

/* Service selection styles */

.grid--1 {
  display: grid;

  row-gap: 1.5rem;

  align-items: center;

  height: 40vh;

  justify-items: center;

  padding: 1.5rem 3rem;
}

.grid--3-cols {
  grid-template-columns: repeat(3, 1fr);

  border: 2px solid var(--color-dark--1);

  border-radius: 2rem;
}

.field-input-label--1 {
  cursor: pointer;

  font-size: 2.8rem;
}

.grid-item--1 {
  display: grid;

  align-items: center;

  justify-items: center;
}

.icon-color {
  color: var(--color-brand--1);
}

.radio-check > .field-input-label .yes:hover {
  color: var(--color-brand--3);
}

.radio-check > .field-input-label .no:hover {
  color: var(--color-red-tick);
}

.radio-check.select > .field-input-label .yes {
  color: var(--color-brand--3);
}

.radio-check.select > .field-input-label .no {
  color: var(--color-red-tick);
}

a {
  color: var(--color-brand--2);
}
a:visited,
a:hover {
  color: var(--color-brand--3);
}