/* declarations */

:root {
  --sidemenu-width: 250px; /*adjust as required*/
  --header-height: 56px;
  --blue-bg: #f1faff;
  --yellow-bg: #fef1d5;
  --green-bg: #d1e7dd;
  --red-bg: #f8d7da;
  --red-info: #dc5345;
  --option-grey: rgba(0, 0, 0, 0.03);
  --persian-green: #1b998b;
  --dark-blue: #1b1f3b;
  --fandango: #a9288b;
  --fandango-faded: #eed4e8;
  --body-text: #363636;
}

/* custom layout */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Ensures equal column width */
  gap: 1rem; /* Bootstrap uses rem-based spacing */
}

.grid-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* Makes sure content is properly aligned */
}
/* boostrap general */

.modal-header {
  background-color: var(--bs-primary); /* Bootstrap's primary color */
  color: #fff; /* White font */
}

.modal-header .modal-title {
  color: #fff; /* Ensure the title text is white */
}

.modal-body {
  background-color: #fff; /* White background */
}

/* layout general */

#appheader {
  z-index: 1050; /* Ensure it appears above other content */
}

#userdropdown {
  background-color: #ffffff;
}

.clickable {
  cursor: pointer !important;
}

.windowheight {
  min-height: 100vh;
}

.large-spinner {
  height: 120px;
  width: 120px;
  border-width: 9px;
}

/* header stuff */
.headerheight {
  height: var(--header-height);
}

.headerprofile {
  height: 40px;
  width: 40px;
  text-align: center;
  padding-top: 3px;
}

/* sidemenu */
#sidemenu {
  width: var(--sidemenu-width);
  padding-top: 20px;
  height: calc(100vh - 56px);
  position: fixed;
}
.sidemenuwidth {
  width: var(--sidemenu-width);
}

#sidemenucollapse {
  width: calc(var(--sidemenu-width) * 0.9);
}

/* nav pills SIDEMENU*/
#sidemenu .navbar-nav .nav-link:hover {
  background-color: #f7f7f7;
  color: #000;
}

#sidemenu .navbar-nav .nav-link:active {
  background-color: #f7f7f7;
}

.navbar-nav .nav-item .nav-link {
  white-space: nowrap; /* Prevents wrapping of text */
}

.navbar-nav .nav-item i {
  min-width: 20px; /* Ensures icons align consistently */
}

/* Optionally, you can add this to ensure the active state persists for active nav links */
#sidemenu .navbar-nav .nav-link.active {
  background-color: #f7f7f7;
  color: #a9288b;
}

.rowcolumn {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

#maincontent {
  margin-left: var(--sidemenu-width);
}

/* make sidemenu collapse and move above if <lg screen */
@media (max-width: 991px) {
  .rowcolumn {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  #sidemenu {
    width: 100%;
    height: auto;
    position: relative;
  }

  #maincontent {
    margin: auto;
    width: 100%;
  }
}

/* More general layout stuff for content pages - header styles etc */

.contentcontainer {
  margin-top: 1rem; /* Top margin */
  -webkit-box-flex: 1;
  -ms-flex: 1 1 800px;
  flex: 1 1 800px; /* Flex-grow: 1, Flex-shrink: 1, Preferred width: 800px */
  max-width: 1200px; /* Maximum width */
  -webkit-box-sizing: border-box;
  box-sizing: border-box; /* Include padding and border in the element's width */
}

/* colours */

.bg-black {
  background-color: #000;
}

.bg-whitecircle {
  background-color: #fff;
  border-radius: 50%;
}

.bg-circle {
  border-radius: 50%;
}

/* forms */

.custom-checkbox .form-check-input {
  width: 1.5rem; /* Make checkbox bigger */
  height: 1.5rem;
  margin-top: 0.25rem; /* Adjust alignment */
}

.custom-checkbox .form-check-label {
  font-size: 0.9rem; /* Slightly larger text */
  line-height: 1.5rem; /* Match checkbox height */
  margin-left: 0.5rem; /* Space between checkbox and text */
}

/* steppers */

#stepper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 20px;
  gap: 40px; /* Keeps consistent spacing */
}

.step {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--fandango);
  background-color: white;
  color: #6c757d;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: bold;
  z-index: 1; /* Ensures it sits above the line */
}

.active .circle {
  background-color: var(--fandango);
  color: white;
}

.past .circle {
  background-color: var(--fandango-faded);
}

.step-title {
  font-size: small;
  text-align: center;
  margin-top: 5px;
}

/* Connector line */

.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 20px; /* Aligns with the middle of the circle */
  left: calc(50% + 20px); /* Start from the right edge of the circle */
  width: calc(100% + 30px); /* Extend further to reach the next circle */
  height: 2px;
  background-color: #6c757d;
  z-index: -1;
}

/* end of steppers */

.formheaderimage {
  max-width: 350px;
  max-height: 125px;
}
.formcard {
  width: 100%;
  min-width: 400px;
  max-width: calc(400px + 2 * 2rem + 2px);
}

.filterbox {
  width: 180px;
}

.filterbox .form-control {
  background-color: #fff;
}

.datepicker {
  background-color: #fff;
  min-width: 200px !important;
}

/* emphasis */
.pre-confirm {
  font-weight: bold; /* Makes the text bold */
  font-size: 1.25rem; /* Increases the font size (1.25rem is equivalent to 20px in a base 16px font size) */
}

/* yes/no radio switch */

.boolean-switch {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; /* Align switch and label in the middle */
  gap: 0.5rem; /* Add spacing between switch and label */
}

.boolean-switch .form-check-input {
  width: 3rem; /* Make switch wider */
  height: 1.6rem; /* Make switch taller */
  position: relative;
  cursor: pointer;
  border-color: var(--bs-danger);
}

.boolean-switch .form-check-input:checked {
  border-color: var(--bs-success);
}
.boolean-switch .form-check-input::after {
  content: "✖"; /* Default (off) state icon */
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--bs-danger);
  position: absolute;
  left: 0.3rem;
  top: 55%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition:
    left 0.3s ease-in-out,
    color 0.3s;
  transition:
    left 0.3s ease-in-out,
    color 0.3s;
}

.boolean-switch .form-check-input:checked::after {
  content: "✔"; /* Checked (on) state icon */
  left: 1.8rem; /* Move to right */
  color: var(--bs-success); /* Bootstrap green */
}

/* central form */
.centralform {
  max-width: 500px;
}

/* verification 2FA form */

/* General styling for input fields */
.verification-code-input {
  width: 90%;
  height: 60px;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  -webkit-transition: border-color 0.3s ease;
  transition: border-color 0.3s ease;
}

/* Change border color to black when filled */
.verification-code-input.inserted {
  border-color: black;
}

/* Styling for the input container */
.verification-code-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

/* flexbox input sizing */

/* make a column of inputs same width */
.flex-input-col {
  -ms-flex-preferred-size: 200px;
  flex-basis: 200px; /* Initial size */
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1; /* Both inputs grow equally */
  max-width: 400px; /* Optional limit */
  min-width: 200px; /* Optional minimum */
}

/* side by side forms and confirm */
/*entry-col is min fixed size for inputs */

.entry-col {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 1 auto; /* Allow shrinking but not growing */
  min-width: 500px; /* Minimum width for the first column */

  -ms-flex-preferred-size: 600px;
  flex-basis: 600px; /* Initial size */
}

.confirm-col {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; /* Grow to fill remaining space but shrink if needed */
  min-width: 200px; /* Minimum width for the second column */
  max-width: 560px; /* Maximum width for the second column prevents overflow and centres properly */
}

.confirm-col-info {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 0 1 auto; /* Grow to fill remaining space but shrink if needed */
  min-width: 200px; /* Minimum width for the second column data*/
  max-width: 560px; /* Minimum width for the second column data*/
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%; /* Initial size */
}

/* accordion cards */

/* Accordion button when not active (collapsed) */
.accordion-button.collapsed {
  background-color: white; /* Set the background color */
}

/* Accordion body */
.accordion-body {
  background-color: white; /* Ensure body background is always white */
}

/* sub-accordions - COMMENT OUT FOR NOW

.accordion-header .subaccordion-header {
  border-width: 2px !important;
  border-color: var(--bs-primary) !important;
}

.accordion-body .subaccordion-body {
  border-width: 2px !important;
  border-color: var(--bs-primary) !important;
}

*/

/* tables */

.table-transparent th {
  background-color: rgba(255, 255, 255, 0);
}

.table-transparent td {
  background-color: rgba(255, 255, 255, 0);
}

.table-profile {
  height: 30px;
  width: 30px;
  text-align: center;
  padding-top: 5px;
  border-color: #a9288b;
  border-style: solid;
  border-width: 1px;
}

/* images */
.largeprofile {
  height: 180px;
  width: 180px;
  text-align: center;
  padding-top: 15px;
  border-color: #a9288b;
  border-style: solid;
  border-width: 3px;
}

.medprofile {
  height: 115px;
  width: 115px;
  text-align: center;
  padding-top: 10px;
  border-color: #a9288b;
  border-style: solid;
  border-width: 3px;
}

/* buttons and similar */

.rounded-pill {
  border-radius: 90%;
}

.overlayclosebox {
  width: 20px;
  height: 20px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--fandango);
  position: absolute;
  top: 10px; /* Position relative to the center vertically */
  right: 20px; /* Position relative to the center horizontally */
}

.overlaycontainer {
  position: relative;
  width: 180px;
  height: 180px;
  margin-left: auto;
  margin-right: auto;
}

.overlayclosebox-med {
  width: 20px;
  height: 20px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--fandango);
  position: absolute;
  top: 5px; /* Position relative to the center vertically */
  right: 5px; /* Position relative to the center horizontally */
}

.overlaycontainer-med {
  position: relative;
  width: 115px;
  height: 115px;
  margin-left: auto;
  margin-right: auto;
}

/* navbars and dropdowns */

.fandango-nav .nav-link.active {
  color: #a9288b;
}

.fandango-nav .nav-link:hover {
  color: #a9288b;
}

.large-nav {
  font-size: 1rem;
}

/* Target cards / divs */

.profilecard {
  min-height: 190px;
}

.fandango-dropdown .dropdown-item:hover {
  background-color: #a9288b;
  color: #ffffff !important;
}

.input-medium-width {
  min-width: 350px;
}

/* countdown timer code
/* Sets the containers height and width */
.base-timer {
  position: relative;
  width: 90px;
  height: 90px;
}

.base-timer__svg {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.base-timer__circle {
  fill: none;
  stroke: none;
}

.base-timer__path-elapsed {
  stroke-width: 7px;
  stroke: grey;
}

.base-timer__path-remaining {
  stroke-width: 7px;
  stroke-linecap: round;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: 1s linear all;
  transition: 1s linear all;
  fill-rule: nonzero;
  stroke: currentColor;
}

.base-timer__path-remaining.green {
  color: rgb(65, 184, 131);
}

.base-timer__path-remaining.orange {
  color: orange;
}

.base-timer__path-remaining.red {
  color: red;
}

.base-timer__label {
  position: absolute;
  width: 90px;
  height: 90px;
  top: 0;
  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 27px;
}

/* vertical timeline and outcome styling */

.timeline-container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* Left column styling */
.timeline-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  text-align: right;
  padding-right: 20px;
}

.left-item {
  height: 27px; /* Match circle height */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* Center column with timeline styling */
.timeline-center {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.timeline-circle {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  z-index: 2;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.timeline-line {
  width: 2px;
  background-color: #6c757d;
  height: 120px; /* Consistent spacing */
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

/* Right column styling */
.timeline-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 10px;
}

.right-item {
  height: 27px; /* Match circle height */
}

.right-line-item {
  height: 120px; /* Match line height */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* Two-line probability text styling */
.probability-text .first-line {
  display: block;
  margin-bottom: 2px;
}

/* outcome styles */

.outcome-block {
  min-width: 200px;
}

.outcome-block-mid {
}

.left-col {
  min-width: 270px;
}

/* document uploaders */
.document-upload-area {
  position: relative;
  min-height: 180px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;

  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.document-upload-area:hover {
  border-color: #6c757d;
}

/* Document Info Card Styles */
.document-icon {
  text-align: center;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
}

.document-icon:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.simple-upload-area {
  min-height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
  background-color: #fafafa;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.simple-upload-area:hover {
  background-color: #f8fbff;
  border-color: #0d6efd;
}

.upload-placeholder i {
  display: block;
}

.upload-selected {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.upload-selected .file-name {
  max-width: 90%;
  word-break: break-word;
  font-size: 0.9rem;
  color: #333;
}