*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

/*----- REMOVE BLUE HIGHLIGHT ON TOUCH -----*/
*:hover,
*:focus,
*:focus-visible,
*:active {
  -webkit-tap-highlight-color: transparent;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

:root {
  --primary-0: #e9e7fe;
  --primary-1: #dbd8fd;
  --primary-2: #cecafc;
  --primary-3: #c1bbfb;
  --primary-4: #b3adfb;
  --primary-5: #a69efa;
  --primary-6: #9890f9;
  --primary-7: #8b81f8;
  --primary-8: #7e72f8;
  --primary-9: #7064f7;
  --primary-10: #6355f6;
  --primary-11: #5547f5;
  --primary-12: #4838f5;
  --primary-13: #3b2af4;
  --primary-14: #2d1bf3;
  --primary-15: #200df2;
  --primary-16: #1e0ce4;
  --primary-17: #1c0bd5;
  --primary-18: #1a0ac7;
  --primary-19: #180ab8;
  --primary-20: #1609aa;
  --primary-21: #14089b;
  --primary-22: #12078d;
  --primary-23: #11077e;
  --primary-24: #0f066f;
  --primary-25: #0d0561;
  --primary-26: #0b0452;
  --primary-27: #090444;
  --primary-28: #070335;
  --primary-29: #050227;
  --primary-30: #030118;


  /* --error-0: #fceeee;
  --error-1: #f8d8d8;
  --error-2: #f4c2c2;
  --error-3: #f0adad;
  --error-4: #ed9797;
  --error-5: #e98181;
  --error-6: #e56c6c;
  --error-7: #e15656;
  --error-8: #dd4040;
  --error-9: #da2b2b;
  --error-10: #c72323;
  --error-11: #b21f1f;
  --error-12: #9c1c1c;
  --error-13: #861818;
  --error-14: #711414;
  --error-15: #5b1010;
  --error-16: #450c0c;
  --error-17: #300808;
  --error-18: #1a0505; */


  --error-37: #fcebf1;
  --error-36: #fae0ea;
  --error-35: #f9d5e2;
  --error-34: #f7cada;
  --error-33: #f5bfd3;
  --error-32: #f4b4cb;
  --error-31: #f2a8c3;
  --error-30: #f09dbc;
  --error-29: #ef92b4;
  --error-28: #ed87ad;
  --error-27: #eb7ca5;
  --error-26: #ea719d;
  --error-25: #e86696;
  --error-24: #e65b8e;
  --error-23: #e55086;
  --error-22: #e3457f;
  --error-21: #e13a77;
  --error-20: #e02e6f;
  --error-19: #de2368;
  --error-18: #d52062;
  --error-17: #ca1e5d;
  --error-16: #bf1d58;
  --error-15: #b41b53;
  --error-14: #a9194e;
  --error-13: #9e1849;
  --error-12: #921644;
  --error-11: #87143e;
  --error-10: #7c1339;
  --error-9: #711134;
  --error-8: #660f2f;
  --error-7: #5b0e2a;
  --error-6: #500c25;
  --error-5: #450a20;
  --error-4: #3a091b;
  --error-3: #2f0715;
  --error-2: #230510;
  --error-1: #18040b;
  --error-0: #0d0206;
  --error-00: #020001;


  --blue-0: #e0e9fa;
  --blue-1: #cad9f7;
  --blue-2: #b4c9f4;
  --blue-3: #9db9f0;
  --blue-4: #87a9ed;
  --blue-5: #7199ea;
  --blue-6: #5b89e6;
  --blue-7: #4579e3;
  --blue-8: #2e6ae0;
  --blue-9: #205cd5;
  --blue-10: #1d53bf;
  --blue-11: #1949a9;
  --blue-12: #163f92;
  --blue-13: #13367c;
  --blue-14: #0f2c66;
  --blue-15: #0c2350;
  --blue-16: #09193a;
  --blue-17: #050f23;


  --blue-80-0: #dfe8fb;
  --blue-80-1: #c8d8f9;
  --blue-80-2: #b1c8f6;
  --blue-80-3: #9ab8f4;
  --blue-80-4: #83a8f1;
  --blue-80-5: #6c98ef;
  --blue-80-6: #5587ec;
  --blue-80-7: #3e77ea;
  --blue-80-8: #2767e7;
  --blue-80-9: #185adc;
  --blue-80-10: #1650c5;
  --blue-80-11: #1347ae;
  --blue-80-12: #113e97;
  --blue-80-13: #0e3481;
  --blue-80-14: #0c2b6a;
  --blue-80-15: #092253;
  --blue-80-16: #07183c;
  --blue-80-17: #040f25;


  --nui-37: #f3f3f4;
  --nui-36: #ececee;
  --nui-35: #e5e5e8;
  --nui-34: #dedee3;
  --nui-33: #d7d7dd;
  --nui-32: #d1d1d7;
  --nui-31: #cacad1;
  --nui-30: #c3c3cb;
  --nui-29: #bcbcc5;
  --nui-28: #b5b5bf;
  --nui-27: #afafb9;
  --nui-26: #a8a8b3;
  --nui-25: #a1a1ad;
  --nui-24: #9a9aa7;
  --nui-23: #9393a1;
  --nui-22: #8c8c9b;
  --nui-21: #868695;
  --nui-20: #7f7f90;
  --nui-19: #78788a;
  --nui-18: #727283;
  --nui-17: #6c6c7c;
  --nui-16: #666675;
  --nui-15: #60606f;
  --nui-14: #5a5a68;
  --nui-13: #545461;
  --nui-12: #4e4e5a;
  --nui-11: #484853;
  --nui-10: #42424c;
  --nui-9: #3c3c46;
  --nui-8: #37373f;
  --nui-7: #313138;
  --nui-6: #2b2b31;
  --nui-5: #25252a;
  --nui-4: #1f1f23;
  --nui-3: #19191d;
  --nui-2: #131316;
  --nui-1: #0d0d0f;
  --nui-0: #070708;
  --nui-00: #010101;




  --seafoam-37: #ebfcf6;
  --seafoam-36: #e0faf1;
  --seafoam-35: #d5f9ec;
  --seafoam-34: #caf7e6;
  --seafoam-33: #bff5e1;
  --seafoam-32: #b4f4dc;
  --seafoam-31: #a8f2d7;
  --seafoam-30: #9df0d2;
  --seafoam-29: #92efcd;
  --seafoam-28: #87edc8;
  --seafoam-27: #7cebc3;
  --seafoam-26: #71eabe;
  --seafoam-25: #66e8b8;
  --seafoam-24: #5be6b3;
  --seafoam-23: #50e5ae;
  --seafoam-22: #45e3a9;
  --seafoam-21: #3ae1a4;
  --seafoam-20: #2ee09f;
  --seafoam-19: #23de9a;
  --seafoam-18: #20d593;
  --seafoam-17: #1eca8b;
  --seafoam-16: #1dbf83;
  /*-- main --*/
  --seafoam-15: #1bb47c;
  --seafoam-14: #19a974;
  --seafoam-13: #189e6c;
  --seafoam-12: #169265;
  --seafoam-11: #14875d;
  --seafoam-10: #137c55;
  --seafoam-9: #11714e;
  --seafoam-8: #0f6646;
  --seafoam-7: #0e5b3f;
  --seafoam-6: #0c5037;
  --seafoam-5: #0a452f;
  --seafoam-4: #093a28;
  --seafoam-3: #072f20;
  --seafoam-2: #052318;
  --seafoam-1: #041811;
  --seafoam-0: #020d09;
  --seafoam-00: #000202;


  --accent: var(--seafoam-16);
  --selection: var(--blue-1);
  --body-bg: var(--nui-36);
  --header: var(--nui-5);
  --body-copy: var(--nui-14);
  --btn-primary: var(--seafoam-18);
  --btn-primary-hov: var(--seafoam-24);
  --btn-primary-txt: var(--nui-2);
  --focus-outline: var(--nui-12);

  --btn-disabled: var(--nui-2);
  --btn-disabled-txt: var(--nui-7);

}

::selection {
  color: var(--header);
  background-color: var(--selection);
}

html,
body {
  height: 100%;
}

body {
  font-family: 'Mulish', sans-serif;
  line-height: 1.5;
  background-color: var(--body-bg);
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}


h1,
h2,
h3,
h4 {
  margin-bottom: 0.5em;
  line-height: 1.25em;
  color: var(--header);
}

h1 {
  font-size: 2.625rem;
}

h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.375rem;
}

h4 {
  font-size: 1.125rem;
}

p {
  margin-bottom: 1.5em;
  color: var(--body-copy);
}

input[type=text],
input[type=number] {
  padding: 0.625rem;
  font-family: 'Mulish', sans-serif;
  font-size: 0.875rem;
  line-height: 1rem;
  border-width: 2px;
  border-style: solid;
  /* border-color: inherit; */
  border-radius: 0.375rem;
  transition: border-color 150ms;
}

/*----- REMOVE DEFAULT NUMBER INCREMENT -----*/
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

input[type=text]:focus-within,
input[type=number]:focus-within {
  /* border-color: inherit; */
  outline: transparent;
}

input[type=submit] {
  transition: 150ms;
}


.form-flex-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  width: 100%;
}

.input-col {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.input-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.input-label {
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  color: var(--body-copy);
}

.num-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  overflow: visible;
}

.num-input-row::after {
  pointer-events: none;
  content: "px";
  position: absolute;
  font-size: 0.875rem;
  color: var(--nui-15);
  right: calc(0.625rem + 2px);
}

.num-input-cont {
  display: flex;
  align-items: center;
  position: relative;
  overflow: visible;
}

.num-input-cont::after {
  pointer-events: none;
  content: "px";
  position: absolute;
  font-size: 0.875rem;
  color: var(--nui-15);
  right: calc(0.625rem + 2px);
}


.err-msg {
  flex-shrink: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.375rem;
  width: auto;
  font-size: 0.875rem;
  line-height: 1.125rem;
  font-weight: bold;
  color: var(--error-20);
  z-index: 15;
}

.err-msg svg {
  flex-shrink: 0;
  width: 1.25rem;
}





.num-input {
  display: flex;
  align-items: center;
  width: 5rem;
  color: var(--header);
  /* border-color: var(--nui-5); */
  border-color: var(--nui-3);
  background-color: var(--nui-3);
}

.num-input::placeholder {
  color: var(--nui-20);
}

.num-input:focus-visible {
  border-color: var(--seafoam-18);
  background-color: var(--body-bg);
}

.num-input.disabled {
  border-color: var(--btn-disabled);
  background-color: var(--btn-disabled);
}

.num-input.disabled::placeholder {
  color: var(--btn-disabled-txt);
}

.num-input.error {
  border-color: var(--error-20);
}






button,
.link-btn,
.input-btn {
  padding: 0.75rem 1rem;
  font-family: 'Mulish', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  line-height: 1rem;
  color: var(--ui-0);
  text-decoration: none;
  border: solid 1px var(--ui-16);
  border-radius: 0.375rem;
  outline: solid 2px transparent;
  background-color: var(--ui-16);
  transition: 150ms;
}

button:focus-visible,
.link-btn:focus-visible,
.input-btn:focus-visible {
  outline: solid 2px var(--ui-2);
  border: solid 1px var(--ui-2);
}

button:disabled,
.link-btn:disabled,
.input-btn:disabled,
button.disabled,
.link-btn.disabled,
.input-btn.disabled {
  /* pointer-events: none; */
  color: var(--ui-5);
  border: solid 1px var(--ui-0);
  outline: solid 2px transparent;
  background-color: var(--ui-0);
  background-image: none;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

select {
  appearance: none;
  position: relative;
  margin: 0;
  padding: 0.75rem 1rem;
  font-family: 'Mulish', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  line-height: 1rem;
  color: var(--ui-18);
  text-decoration: none;
  border: solid 2px var(--ui-1);
  border-radius: 0.375rem;
  outline: solid 2px transparent;
  background-color: var(--ui-00);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.75rem top 50%;
  background-size: 1rem;
  transition: 150ms;
}

select::-ms-expand {
  display: none;
}

select:focus-visible {
  cursor: pointer;
  border: solid 2px var(--ui-5);
  outline: solid 2px var(--ui-2);
}

select:disabled {
  /* pointer-events: none; */
  color: var(--ui-5);
  border: solid 2px var(--ui-1);
  outline: solid 2px transparent;
  background-color: var(--ui-0);
  background-image: none;
}

option {
  border: solid 2px var(--ui-1);
  background-color: var(--ui-00);
  transition: 150ms;
}

.btn-icon {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.btn-icon svg {
  width: 1.5rem;
  flex-shrink: 0;
}

/* .btn-primary {
  color: #fff;
  border: solid 1px var(--primary-12);
  background-color: var(--primary-12);
}

.btn-primary:hover {
  cursor: pointer;
  border: solid 1px var(--primary-11);
  background-color: var(--primary-11);
}

.btn-primary:focus-visible {
  outline: transparent;
  border: solid 1px var(--primary-15);
} */

.btn-primary {
  font-weight: bold;
  color: var(--btn-primary-txt);
  border: solid 1px var(--btn-primary);
  outline: solid 2px transparent;
  background-color: var(--btn-primary);
}

select:hover:disabled {
  cursor: not-allowed;
}

.btn-primary:focus-visible {
  border: solid 1px var(--btn-primary-hov);
  outline: solid 2px var(--focus-outline);
  background-color: var(--btn-primary-hov);
}

.btn-primary:disabled,
.btn-primary.disabled {
  /* pointer-events: none; */
  color: var(--btn-disabled-txt);
  border: solid 1px var(--btn-disabled);
  outline: solid 2px transparent;
  background-color: var(--btn-disabled);
  background-image: none;
}




fieldset {
  margin: 0rem;
  padding: 0rem;
  border: 0rem;
}


main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  margin-inline: auto;
  /* margin-top: 3rem; */
  /* margin-bottom: 3rem; */
  padding: 1rem;
  max-width: 1400px;
  width: 100%;
  /* height: auto; */
  min-height: 100%;
  height: auto;
  /* background-color: red; */
}

#user-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-inline: auto;
  /* padding: 1rem; */
  /* max-width: 1400px; */
  width: 100%;
  /* background-color: var(--nui-37); */
}

#log-out-button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: var(--nui-37);
  padding: 0.5em 0.875rem 0.5rem 0.625rem;
  border: solid 2px var(--nui-1);
  border-radius: 0.375rem;
  background: var(--nui-1);
  transition: ease 150ms;
}

#log-out-button svg {
  fill: var(--nui-37);
}

#log-out-button:focus-visible {
  border: solid 2px var(--nui-6);
  outline: solid 2px var(--focus-outline);
  background-color: var(---nui-6);
}



.user-message {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  position: fixed;
  bottom: 1rem;
  margin-inline: auto;
  font-size: 0.875rem;
  color: var(--nui-37);
  padding: 0.75em 0.875rem 0.75rem 0.875rem;
  border-radius: 0.375rem;
  background: var(--nui-1);
  transition: ease 150ms;
}

.user-message.icon {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  position: fixed;
  bottom: 1rem;
  margin-inline: auto;
  font-size: 0.875rem;
  color: var(--nui-37);
  padding: 0.75em 1.125rem 0.75rem 0.875rem;
  border-radius: 0.375rem;
  background: var(--nui-1);
  transition: 150ms;
}

.user-message svg, .user-message.icon svg {
  fill: var(--nui-37);
}

#user-status {
  font-size: 0.875rem;
  color: var(--nui-37);
  padding: 0.5em 0.875rem;
  border-radius: 0.375rem;
  background: var(--nui-1);
}

#log-in {
  margin-inline: auto;
  height: 100%;
  background-color: blue;
}

#log-in-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-inline: auto;
}

#email-input, #password-input {
  color: var(--header);
  padding: 0.75em;
  border: 2px solid var(--nui-35);
  border-radius: 0.375rem;
  background: var(--nui-37);
}

input[type="submit"] {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.75rem 1rem;
  font-family: 'Mulish', sans-serif;
  /* font-size: 0.875rem; */
  /* font-weight: bold; */
  text-align: center;
  line-height: 1rem;
  color: var(--nui-37);
  text-decoration: none;
  border: solid 2px var(--blue-80-8);
  border-radius: 0.375rem;
  outline: solid 2px transparent;
  background-color: var(--blue-80-8);
  transition: 150ms; 
}

input[type="submit"]:focus-visible {
  border: solid 2px var(--blue-80-10);
  outline: solid 2px var(--focus-outline);
  background-color: var(--blue-80-10);
}

#log-in-button {
  width: 100%;
}

#protected {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
}

#search-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#search-input {
  color: var(--header);
  padding: 0.75em;
  border: 2px solid var(--nui-35);
  border-radius: 0.375rem;
  background: var(--nui-37);
}

#search-form input[type="submit"] {
  align-self: stretch;
}

#people-grid {
  display: grid;
  grid-template-columns:  repeat(auto-fill, minmax(18rem, 1fr));
  gap: 0.5rem;
  width: 100%;
}

/* .person {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--header);
  padding: 1.375rem;
  border: 2px solid var(--nui-35);
  border-radius: 0.375rem;
  background: var(--nui-37);
} */

/* .person {
  display: grid;
  grid-template-columns:  repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  color: var(--header);
  padding: 1.375rem;
  border: 2px solid var(--nui-35);
  border-radius: 0.375rem;
  background: var(--nui-37);
} */

.person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--header);
  padding: 1.375rem;
  border: 2px solid var(--nui-35);
  border-radius: 0.375rem;
  background: var(--nui-37);
}

.info {
  /* display: flex; */
  /* flex-shrink: 0; */
  /* align-items: flex-start; */
  /* justify-content: space-between; */
  /* background-color: red; */
}

.name {
  margin-bottom: 0.25rem;
  line-height: 1.5rem;
}

.position {
  font-style: italic;
  color: var(--nui-18);
}

.status-icons {
  display: flex;
  gap: 0.375rem;
}

.status-icons * svg {
  width: 20px;
  height: 20px;
}

.icon {
  padding: 0.375rem;
  border-radius: 2rem;
}

.data-buttons {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.75rem;
  /* background-color: blue; */
}



.image-consent, .dietary-restrictions {
  display: flex;
  gap: 0.375rem;
}










.spin {
  animation-name: spin;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}













/*---------- Icon Checkbox ----------*/
.checkbox-cont {
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkbox-cont input[type="checkbox"] {
  position: absolute;
  width: 0;
  height: 0;
  border: 0px solid transparent;
  outline: 0px solid transparent;
  background: var(--nui-37);
  opacity: 0;
  z-index: -5;
}

.checkbox-cont [type="checkbox"]:focus-visible+label {
  color: var(--btn-primary-txt);
  border: solid 1px var(--btn-primary);
  outline: solid 2px var(--focus-outline);
  background-color: var(--btn-primary);
}

.checkbox-cont [type="checkbox"]:focus-visible+label > svg {
  fill: var(--btn-primary-txt);
}

.checkbox-cont input[type="checkbox"]:checked+label {
  cursor: pointer;
  color: var(--btn-primary-txt);
  border: solid 1px var(--btn-primary);
  background-color: var(--btn-primary);
}

.checkbox-cont input[type="checkbox"]:checked+label > svg {
  fill: var(--btn-primary-txt);
}

.checkbox-cont input[type="checkbox"]:checked:disabled+label {
  cursor: default;
  color: var(--btn-disabled-txt);
  border: solid 1px var(--cui-1);
  background-color: var(--cui-1);
}

.checkbox-cont label {
  padding: 0.5rem;
  font-family: 'Mulish', sans-serif;
  font-size: 0.875rem;
  font-weight: bold;
  text-align: center;
  line-height: 1rem;
  color: var(--body-copy);
  text-decoration: none;
  border: solid 1px var(--nui-28);
  border-radius: 100%;
  outline: solid 2px transparent;
  background-color: var(--nui-35);
  transition: 150ms;
}

.icon-checkbox svg {
  fill: var(--body-copy);
}

.icon-checkbox:disabled,
.icon-checkbox.disabled,
.icon-checkbox.not-supported {
  /* pointer-events: none; */
  color: var(--btn-disabled-txt);
  border: solid 1px var(--btn-disabled);
  outline: solid 2px transparent;
  background-color: var(--btn-disabled);
  background-image: none;
}





/*------ red style ------*/

.checkbox-cont.red [type="checkbox"]:focus-visible+label {
  color: var(--btn-primary-txt);
  border: solid 1px var(--error-24);
  outline: solid 2px var(--focus-outline);
  background-color: var(--error-24);

}

.checkbox-cont.red input[type="checkbox"]:checked+label {
  cursor: pointer;
  color: var(--btn-primary-txt);
  border: solid 1px var(--error-24);
  background-color: var(--error-24);
}

.checkbox-cont.red input[type="checkbox"]:checked+label > svg {
  fill: var(--btn-primary-txt);
}

.checkbox-cont.red input[type="checkbox"]:checked:disabled+label {
  cursor: default;
  color: var(--btn-disabled-txt);
  border: solid 1px var(--cui-1);
  background-color: var(--cui-1);
}



/*------ blue style ------*/

.checkbox-cont.blue [type="checkbox"]:focus-visible+label {
  color: var(--btn-primary-txt);
  border: solid 1px var(--blue-80-4);
  outline: solid 2px var(--focus-outline);
  background-color: var(--blue-80-4);

}

.checkbox-cont.blue input[type="checkbox"]:checked+label {
  cursor: pointer;
  color: var(--btn-primary-txt);
  border: solid 1px var(--blue-80-4);
  background-color: var(--blue-80-4);
}

.checkbox-cont.blue input[type="checkbox"]:checked+label > svg {
  fill: var(--btn-primary-txt);
}

.checkbox-cont.blue input[type="checkbox"]:checked:disabled+label {
  cursor: default;
  color: var(--btn-disabled-txt);
  border: solid 1px var(--cui-1);
  background-color: var(--cui-1);
}




/*---------- Custom Radio Buttons  ----------*/
.radio-cont {
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-cont input[type="radio"] {
  position: absolute;
  width: 0;
  height: 0;
  border: 0px solid transparent;
  outline: 0px solid transparent;
  background: var(--nui-37);
  opacity: 0;
  z-index: -5;
}

.radio-cont [type="radio"]:focus-visible+label {
  color: var(--btn-primary-txt);
  border: solid 1px var(--btn-primary);
  outline: solid 2px var(--focus-outline);
  background-color: var(--btn-primary);

}

.radio-cont input[type="radio"]:checked+label {
  cursor: pointer;
  color: var(--btn-primary-txt);
  border: solid 1px var(--btn-primary);
  background-color: var(--btn-primary);
}

.radio-cont input[type="radio"]:checked+label > svg {
  fill: var(--btn-primary-txt);
}

.radio-cont input[type="radio"]:checked:disabled+label {
  cursor: default;
  color: var(--btn-disabled-txt);
  border: solid 1px var(--cui-1);
  background-color: var(--cui-1);
}

.radio-cont label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.75rem 1rem;
  font-family: 'Mulish', sans-serif;
  font-size: 0.875rem;
  font-weight: bold;
  text-align: center;
  line-height: 1rem;
  color: var(--body-copy);
  text-decoration: none;
  border: solid 1px var(--nui-28);
  border-radius: 0.375rem;
  outline: solid 2px transparent;
  background-color: var(--nui-35);
  transition: 150ms;
}

.radio-label svg {
  fill: var(--body-copy);
}

.radio-label:disabled,
.radio-label.disabled,
.radio-label.not-supported {
  /* pointer-events: none; */
  color: var(--btn-disabled-txt);
  border: solid 1px var(--btn-disabled);
  outline: solid 2px transparent;
  background-color: var(--btn-disabled);
  background-image: none;
}











@media (hover: hover) {
  /* when hover is supported */

  /*----- HOVER AND FOCUS -----*/
  input[type=text]:hover,
  input[type=number]:hover {
    /* border-color: inherit; */
    outline: transparent;
  }

  button:hover,
  .link-btn:hover,
  .input-btn:hover {
    cursor: pointer;
    border: solid 1px var(--ui-18);
    background-color: var(--ui-18);
  }


  button:hover:disabled,
  .link-btn:hover:disabled,
  .input-btn:hover:disabled,
  button:hover.disabled,
  .link-btn:hover.disabled,
  .input-btn:hover.disabled {
    cursor: default;
  }


  select:hover {
    cursor: pointer;
    border: solid 2px var(--ui-5);
  }

  option:hover {
    text-align: left;
    line-height: 1rem;
    color: var(--ui-18);
    text-decoration: none;
    background-color: var(--ui-1);
  }
  
  .btn-primary:hover {
    cursor: pointer;
    border: solid 1px var(--btn-primary-hov);
    background-color: var(--btn-primary-hov);
  }
  
  .btn-primary:hover:disabled,
  .btn-primary:hover.disabled {
    cursor: default;
  }
  
  #log-out-button:hover {
    cursor: pointer;
    border: solid 2px var(--nui-6);
    background-color: var(--nui-6);
  }
  
  input[type="submit"]:hover {
    cursor: pointer;
    border: solid 2px var(--blue-80-10);
    background-color: var(--blue-80-10);
  }
  
  .checkbox-cont label:hover {
    cursor: pointer;
    color: var(--btn-primary-txt);
    border: solid 1px var(--btn-primary);
    background-color: var(--btn-primary);
  }
  
  .icon-checkbox:hover svg {
    fill: var(--btn-primary-txt);
  }
  
  .icon-checkbox:hover:disabled,
  .icon-checkbox:hover.disabled,
  .icon-checkbox:hover.not-supported {
    cursor: default;
  }
  
  .checkbox-cont.red label:hover {
    cursor: pointer;
    color: var(--btn-primary-txt);
    border: solid 1px var(--error-24);
    background-color: var(--error-24);
  }
  
  .checkbox-cont.blue label:hover {
    cursor: pointer;
    color: var(--btn-primary-txt);
    border: solid 1px var(--blue-80-4);
    background-color: var(--blue-80-4);
  }
  
  .radio-label:hover {
    cursor: pointer;
    color: var(--btn-primary-txt);
    border: solid 1px var(--btn-primary);
    background-color: var(--btn-primary);
  }

  .radio-label:hover svg {
    fill: var(--btn-primary-txt);
  }
  
  .radio-label:hover:disabled,
  .radio-label:hover.disabled,
  .radio-label:hover.not-supported {
    cursor: default;
  }

}




#screen-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}





@keyframes spin-fast {
  100% {
    transform: rotate(360deg)
  }
}

.spin-fast {
  animation: spin-fast 600ms linear infinite;
}


.transition {
  transition: opacity 150ms;
}

.slide-up {
  transform: translateY(1rem);
}

.hidden {
  visibility: hidden;
  opacity: 0;
}

.margin-inline {
  margin-inline: auto;
}