:root {
  --Primary-Yellow: #F7B731; /* global scope */
  --Primary-Orange: #F26A21;
  --Primary-Blue: #36B4E8;
  --Primary-Grey: #BEC7D8;

  --Secondary-Yellow-Shade: #E8A414;
  --Secondary-Yellow-Tint: #FFDD96;
  --Secondary-Yellow-Lightest_Tint: #FEEECD;


  --Secondary-Orange-Shade: #B44D16;
  --Secondary-Orange-Tint: #FFB89A;

  --Secondary-Blue-Tint: #CAF0FF;
  --Secondary-Blue: #70C4E6;
  --Secondary-Blue-Shade: #14749B;

  --Secondary-Grey-Tint: rgb(238, 241, 245);
}

/* Typescale */

h1{
    font-size: 6vw;
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

h2{
    font-size: 52px;
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

h3{
    font-size: 32px;
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

h4{
    font-size: 28px;
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.h4Bold{
    font-weight: bold;
    font-size: 24px;
    padding-top: 10px;
}

h5{
    font-size: 18px;
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

h6{
    font-size: 16px;
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

p{
    font-size: 16px;
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.pLight{
    font-weight: 400;
}

.buttonText{
    font-size: 16px;
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.secondaryButton{
    background-color: var(--Secondary-Yellow-Shade);
    color: white;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 100px;
    border: none;
}

.secondaryButton:hover{
    background-color: var(--Secondary-Yellow-Tint);
    color: var(--Secondary-Yellow-Shade);
}

.secondaryGhost{
    border: 3px solid var(--Secondary-Yellow-Shade);
    background-color: white;
    color: var(--Secondary-Yellow-Shade);
}

.secondaryButtonWidth{
    width: 145px;
}

.primaryButton{
    background-color: var(--Primary-Orange);
    color: white;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 100px;
    border: none;
}

.primaryButton:hover{
   background-color: var(--Secondary-Orange-Tint); 
   color: var(--Secondary-Orange-Shade);
}

.primaryGhost{
    border: 3px solid var(--Primary-Orange);
    background-color: white;
    color: var(--Secondary-Orange-Shade);
}

.whiteButton{
    background-color: white;
    color: black;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 100px;
    border: none;
    width: 100%;
}

.whiteButton:hover{
    background-color: rgba(255, 255, 255, 0.812);
}

.tertiaryButton{
    background-color: var(--Primary-Blue);
    color: white;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 100px;
    border: none;
}

.tertiaryButton:hover{
    background-color: var(--Secondary-Blue-Tint);
    color: var(--Secondary-Blue-Shade);
}

.tertiaryGhost{
    border: 3px solid var(--Primary-Blue);
    background-color: white;
    color: var(--Secondary-Blue-Shade);
}

.tertiaryGhostDisabled{
    border: 3px solid var(--Primary-Grey);
    background-color: white;
    color: grey;
}

.goodSemanticButton{
    background-color: white;
    color: #0e623b;
    padding: 8px;
    border-radius: 100px;
    border:#198754 solid;
    border-width: 3px;
    height: fit-content;
    margin-top: 7px;
    margin-left: 30px;
}

.badSemanticButton{
    color: #95202B;
    border:#dc3545 solid;
    margin-left: 6px;
}

.goodSemanticButton:hover{
    background-color: #cff7e4;
}

.badSemanticButton:hover{
    background-color: #ffd2d7;
}

/* logo animation */
.logo {
    display: block;
    margin: auto;
    margin-top: 15%;
    animation-name: myAnimation;
    animation-duration: 2s;
    animation-timing-function: ease-in;
}

@keyframes myAnimation {
    to {
    transform: scale(2);
  }
  50%   {opacity: 100%;}
  100%  {opacity: 0%;}
}

.background{
    background-color: #FCF8F1;
}

/* Landing page */
.backgroundImage{
    background-image: url("Assets/landingPage.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
}

.landingpageH1{
    margin-left: 20%;
    text-align: center;
    margin-right: 20%;
    padding-top: 3%;
}

.landingpageH4{
    margin-left: 25%;
    text-align: center;
    margin-right: 25%;
    padding-top: 1%;
    padding-bottom: 1%;
}

.landingButton{
    display: block;
    margin: auto;
    margin-top: 15px;
}

/* Signup and login pages */
.backgroundImageSignup{
    background-image: url("Assets/SignupBG.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
}

input{
    border-radius: 12px;
    border: 1px solid var(--Primary-Grey);;
    padding: 8px 8px;
    width: 100%;
}

.block{
    margin: auto;
    border-radius: 24px;
    background: var(--Secondary-Yellow-Lightest_Tint);
    width: fit-content;
    padding: 40px 40px;
    justify-content: center;
}

.signupH5{
    margin-top: 4%;
    margin-bottom: 8%;
}

.spaceBetween{
    margin-top: 3%;
}

.linkText{
    color: var(--Primary-Orange);
    padding-left: 4px;
}

/* The sidebar menu */
.sidenav {
  height: 100%;
  width: fit-content;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #FFF;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
}

/* The navigation menu links */
.sidenav a {
  padding: 12px 0px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: black;
  display: block;
}

.noPadding{
    padding: 0;
}

.sidenav a:hover {
  color: var(--Secondary-Orange-Shade);
}

.sidebarLogo{
width: 194px;
height: 109px;
padding: 5%;
padding-left: 0;
}

.icon{
    height: 24px;
    padding-left: 20px;
}

/*
Source - https://stackoverflow.com/a/58463573
Posted by pasanjg, modified by community. See post 'Timeline' for change history
Retrieved 2026-09-30, License - CC BY-SA 4.0
*/

@media only screen and (max-width: 1500px) {
  #hide {
    display: none;

  }
}

/* home page */
.main {
  margin-left: 18%;
  padding: 0px 10px;
  margin-right: 4%;
  
}

.modernLove{
    font-family: "modern-love-caps", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 5vw;
    color: var(--Secondary-Orange-Shade);
}

.minionPro{
    font-family: "minion-pro", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3vw;
}

.minionProMedium{
    font-family: "minion-pro", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 35px;
}

.linkText{
    text-decoration: none;
}

.linkTextYellow{
    text-decoration: none;
    color: var(--Secondary-Yellow-Shade);
}

.linkTextBlue{
    text-decoration: none;
    color: var(--Secondary-Blue-Shade);
}

.linkTextRed{
    text-decoration: none;
    color: var(--Secondary-Orange-Shade);
}

.navLinks{
    color: black;
    padding-right: 20px;
    padding-bottom: 20%;
}

.activeLink{
    text-decoration: underline;
}

.welcomeBackBanner{
    background-image: url("Assets/Welcome\ banner.png");
    border-radius: 24px;
    background-position: right;
    padding: 45px 32px 32px 32px;
}

.visitFeedback{
    background-color: var(--Secondary-Blue-Tint);
    border-radius: 24px;
    padding: 30px;
    margin-top: 5%;
    margin-right: 3%;
    height: fit-content;
    box-shadow: 0 4px 7px -4px rgba(0, 0, 0, 0.25);
}

.upcomingVisits{
    background-image: url("Assets/Upcoming\ visits.png");
    border-radius: 24px;
    background-position: right;
    background-size: cover;
    padding: 30px;
    margin-top: 2%;
    width:100%;
    box-shadow: 0 4px 7px -4px rgba(0, 0, 0, 0.25);
}

.badge{
    margin-left:20dvh;
    margin-bottom: 0;
    padding-bottom: 0;
}

.visith6{
    margin-top: 5%;
    margin-bottom: 2%;
}

.marginTopSmall{
    margin-top: 3%;
    margin-bottom: 0;
}

.careRequests{
    background-color: white;
    border-radius: 24px;
    padding: 30px;
    margin-top: 5%;
    margin-right: 3%;
    height: fit-content;
    margin-bottom: 30px;
    box-shadow: 0 4px 7px -4px rgba(0, 0, 0, 0.25);
}

.marginLeftSmall{
    margin-left: 3%;
}

.careSuppliesText{
    margin-top: 13%;
    padding-left: 20px;
    margin-bottom: 10px;
}

.imagePaddingTop{
    padding-top: 10px;
}

.invisibleLink{
    color: white;
    text-decoration: none;
}

/* supply request page */
.selectRequests{
    background-color: var(--Secondary-Blue-Tint);
    border-radius: 24px;
    padding: 30px;
    margin-top: 4%;
    margin-right: 3%;
    height: fit-content;
    margin-bottom: 20px;
    box-shadow: 0 4px 7px -4px rgba(0, 0, 0, 0.25);
}

.supplyRequests{
    background-color: white;
    border-radius: 24px;
    padding: 30px;
    margin-top: 1.5%;
    margin-right: 3%;
    height: fit-content;
    margin-bottom: 20px;
    box-shadow: 0 4px 7px -4px rgba(0, 0, 0, 0.25);
}

.supplyCategory{
    display: flex;
    width: 140px;
    padding-top: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background-color: white;
    border-radius: 24px;
    margin-left: 3%;
    margin-top: 3%;
    border-width: 0cap;
    box-shadow: 0 4px 7px -4px rgba(0, 0, 0, 0.25);
}

.supplyCategory:hover{
    box-shadow: 0 4px 7px -4px inset rgba(0, 0, 0, 0.25);
}

/* supply request form */
.qty-btn { 
    cursor: pointer; 
    background-color: white;
    border: none;
    margin-bottom: 20px;
}

.smallInput{
    border-radius: 12px;
    border-color: var(--Primary-Grey);
    width: 60px;
    height: 30px;
}

.paddingTopMedium{
    margin-top: 30px;
}

.paddingBottomSmall{
   margin-bottom: 20px; 
}

/* volunteer page */
.listedVolunteer{
    background-color: var(--Secondary-Yellow-Tint);
    border-radius: 24px;
    padding: 15px 30px;
    border-style: none;
    margin-top: 10px;
    width: 90%;
    min-width: 400px;
    text-align: left;
    box-shadow: 0 4px 7px -4px rgba(0, 0, 0, 0.25);
}

.listedVolunteerInactive{
    background-color: white;
}

.badgeStyling{
    display: flex;
    align-items: end;
    padding-left: 10px;
    padding-right: 10px;
}

.badgeExpected{
    background-color: var(--Primary-Blue);
}

.badgeArrived{
    background-color: var(--Secondary-Yellow-Shade);
    width: 100px;
    padding-left: 20px;
}

.badgeLate{
    background-color: var(--Primary-Orange);
    width: 100px;
    padding-left: 30px;
}

.volunteerDetails{
    background-image: url("Assets/Visitor\ Details.png");
    background-position: right;
    background-size: cover;
    border-radius: 24px;
    padding: 31px;
    padding-left: 38px;
    height: fit-content;
}

.sendButton{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    height: 60px;
    padding-left: 15px;
    box-shadow: 0 4px 7px -4px inset rgba(0, 0, 0, 0.25);
}

textarea{
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    width:300px;
    font-size: medium;
}

.SelectedCares{
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 5px;
    margin-right: 10px;
    background-color: var(--Secondary-Yellow-Shade);
    color: white;
    border-radius: 100px;
}

.marginTopMedium{
    margin-top: 20px;
}

.marginTopTiny{
    margin-top: 5px;
}

.volunteerStatus{
    background-color: white;
    border-radius: 24px;
    padding-left: 4%;
    padding-right: 4%;
    padding-top: 2%;
    padding-bottom: 2%;
    margin-top: 3%;
    margin-bottom: 3%;
    box-shadow: 0 4px 7px -4px rgba(0, 0, 0, 0.25);
    margin-right: 2%;
}

.marginRightTiny{
    margin-right: 8px;
}

.timeStamp{
    background-color: var(--Secondary-Blue-Tint);
    text-align: center;
    border-radius: 24px;
    margin-top: 8px;
    padding-top: 10px;
    padding-bottom: 3px;
}

/* date picker */
.calendar-container {
    background-image: url("Assets/Visitor\ Details.png");
    background-position: right;
    background-size: cover;
    padding: 24px;
    border-radius: 24px;
    margin-top: 5%;
}

input[type="date"] {
    padding: 10px 14px;
    font-size: 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    outline: none;
    cursor: pointer;
    color: #334155;
}
input[type="date"]:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* bookings page admin */
.scheduleControls{
    background-color: white;
    border-radius: 24px;
    padding-left: 8%;
    padding-right: 8%;
    padding-top: 5%;
    padding-bottom: 2%;
    margin-top: 4%;
    margin-bottom: 3%;
    box-shadow: 0 4px 7px -4px rgba(0, 0, 0, 0.25);
}

.selectedTime{
    background-color: var(--Secondary-Orange-Tint);
    text-align: center;
    border-radius: 24px;
    margin-top: 15px;
    padding-top: 10px;
    padding-bottom: 3px;
}

.paddingBottomTiny{
    padding-bottom: 8px;
}

.capacity-btn { 
    cursor: pointer; 
    background-color: white;
    border: none;
    padding-top: 0;
}

.blockSlotButton{
    background-color: var(--Secondary-Blue-Tint);
    text-align: left;
    border-radius: 24px;
    border: none;
    padding-top: 20px;
    margin-top: 20px;
    padding-bottom: 20px;
    height: fit-content;
    padding-right: 20px;
}

.marginBottom0{
    margin-bottom: 0;
}

/* progress bar */
.progressBar{
    flex-grow: 1; 
    height: 6px; 
    background: #e2e8f0; 
    border-radius: 9999px; 
    overflow: hidden; 
    width: 120px;
}

.progressFill{
    width: 65%; 
    height: 100%; 
    background: var(--Primary-Orange); 
    border-radius: 9999px;
}

.timeSlotsContainer{
    background-color: white;
    border-radius: 24px;
    margin-top: 20px;
    padding-top: 20px;
    padding-left: 30px;
    padding-right: 30px;
    height: fit-content;
}

/* table with time slots */
.bookingsTable{
    max-width: 600px;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    overflow: hidden;
    margin-top: 20px;
    font-family: "Manrope", sans-serif;
}
th, td {
    padding: 12px 8px;
    text-align: left;
    font-size: 0.9rem;
    color: #334155;
}
/* Table Header Style */
th {
    background-color: var(--Secondary-Blue-Shade);
    color: white;
    font-weight: 600;
}
/* Alternating row colors using CSS pseudo-class */
tbody tr:nth-child(even) {
    background-color: #f1f5f9;
}
tbody tr:nth-child(odd) {
    background-color: white;
}

tbody tr:hover {
    background-color: #e2e8f0;
}

/* Reports page */
.tablePadding th, td{
    padding: 12px 12px;
}

.recentActivityContainer{
    background-color: white;
    border-radius: 24px;
    padding-left: 3%;
    padding-top: 15px;
    width: 90%;
    padding-right: 3%;
    padding-bottom: 15px;
    margin-top: 20px;
    box-shadow: 0 4px 7px -4px rgba(0, 0, 0, 0.25);
}

.hoursCounter{
    display: flex;
    color: var(--Secondary-Blue-Shade);
    border: solid var(--Secondary-Blue);
    border-width: 3px;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    padding: 5px;
    margin-bottom: 15px;
}

.hoursGraphContainer{
    background-color: white;
    box-shadow: 0 4px 7px -4px rgba(0, 0, 0, 0.25);
    margin-top: 20px;
    padding: 25px;
    border-radius: 24px;
    margin-bottom: 30px;
}

.chart-card{
    justify-content: center;
    align-items: center;
    max-width: 40vh;
}

/* supplies table */
.custom-grid-table {
    width: 100%;
    border-collapse: collapse;
}

.custom-grid-table td {
    padding: 12px 20px;
    vertical-align: middle;
}

/* Horisontal line at the bottom of every row */
.custom-grid-table tr {
    border-bottom: 1px solid var(--Primary-Grey);
}

/* Vertical line between the columns */
.custom-grid-table td:first-child {
    border-right: 1px solid var(--Primary-Grey);
}

.materialsSourced{
    background-image: url("Assets/Visitor\ Details.png");
    background-position: right;
    background-size: cover;
    height: fit-content;
    margin-top: 20px;
    margin-bottom: 30px;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 4px 7px -4px rgba(0, 0, 0, 0.25);
}

/* Staff page */
.staffTable{
    width: fit-content;
}

.staffAccess{
    padding: 20px;
    background-color: white;
    border-radius: 20px;
    margin-top: 20px;
}

.userDetails{
    background-color: var(--Secondary-Blue-Tint);
    border-radius: 24px;
    padding: 10px;
    align-items: center;
}

.accessCategory{
    background-color: var(--Primary-Blue);
    color: white;
    border-radius: 24px;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 10px;
}

.marginTop15{
 margin-top: 15px;
}

/* radio group */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  font-family: "Manrope",sans-serif;
}

.radio-button {
  display: flex;
  align-items: center;
  padding: 10px 18px;
  border: 2px solid var(--Primary-Grey);
  border-radius: 24px;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

/* hide default browser radio input */
.radio-button input[type="radio"] {
  display: none;
}

/* Custom radio indicator */
.radio-icon {
  width: 20px;
  height: 20px;
  border: 2px solid var(--Primary-Grey);
  border-radius: 50%;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
}

/* Inner dot radio button */
.radio-icon::after {
  content: "";
  width: 10px;
  height: 10px;
  background-color: var(--Secondary-Yellow-Shade);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.2s ease-in-out;
}

.radio-label {
  font-size: 16px;
  font-weight: 500;
}

/* Selected States */

/* checked, inner dot */
.radio-button input[type="radio"]:checked + .radio-icon::after {
  transform: scale(1);
}

/* change border color of the icon when checked */
.radio-button input[type="radio"]:checked + .radio-icon {
  border-color: var(--Secondary-Yellow-Shade);
}

/* Change the button's background and border when selected */
.radio-button:has(input[type="radio"]:checked) {
  border-color: var(--Secondary-Yellow-Shade);
  background-color: var(--Secondary-Yellow-Lightest_Tint);
}

/* Volunteer homepage */
.welcomeBanner{
    background-image: url("Assets/volunteerHome.png");
    background-position: right;
    background-size: cover;
    border-radius: 24px;
    background-position: right;
    padding: 45px 32px 32px 32px;
    margin-top: 4%;
}

.textColour{
    color: var(--Secondary-Orange-Shade);
}

.circle-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: var(--Primary-Yellow);
  color: white;
  font-size: 30px;
  font-weight: medium;
  font-family: "Manrope", sans-serif;
}

.chooseDate{
    border-radius: 24px;
    background-image: url("Assets/Step1.png");
    background-position: right;
    background-size: cover;
    padding: 18px;
    padding-bottom: 45px;
    margin-top: 2%;
}

.chooseDateBlue{
    background-image: url("Assets/Step2.png");
    background-position: top;
}

.circle-number-blue{
    background-color: var(--Primary-Blue);
}

.chooseDateRed{
    background-image: url("Assets/Step3.png");
    background-position: top;
}

.circle-number-Red{
    background-color: var(--Primary-Orange);
}

.marginTopLarge{
    margin-top: 40px;
}

/* volunteer visits page */
.scheduledVisits{
    background-color: white;
    padding: 4%;
    margin-top: 20px;
    border-radius: 24px;
    box-shadow: 0 4px 7px -4px rgba(0, 0, 0, 0.25);
}

.feedbackVolunteer{
    border-radius: 24px;
    background-image: url("Assets/FeedbackContainer.png");
    background-position: top;
    background-size: fill;
    padding: 3%;
    margin-top: 2%;
    margin-bottom: 40px;
    box-shadow: 0 4px 7px -4px rgba(0, 0, 0, 0.25);
    height: fit-content;
}

.feedbackContainer{
    background-color: white;
    border-radius: 24px;
    padding: 5%;
    padding-bottom: 3%;
    margin-bottom: 15px;
}

.redText{
    color: var(--Primary-Orange);
}

.textBig{
    font-size: 70px;
}

.hoursContainer{
    border-radius: 24px;
    background-image: url("Assets/CareHistory.png");
    background-position: left;
    background-size: cover;
    padding: 5%;
    margin-top: 8%;
    margin-bottom: 20px;
    width: 100%;
}

.careHistory{
    background-color: white;
    padding: 3%;
    margin-top: 2%;
    margin-bottom: 40px;
    box-shadow: 0 4px 7px -4px rgba(0, 0, 0, 0.25);
    border-radius: 24px;
}

.scroll-container {
  width: 100%;
  max-height: 230px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--Primary-Grey);
  border-radius: 24px;
  font-family: "Manrope", sans-serif;
}

.row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 12px 16px;
  border-bottom: 1px solid #e0e0e0;
  align-items: center;
}

.row:last-child {
  border-bottom: none;
}

.timeButton:has(input[type="radio"]:checked){
    background-color: var(--Secondary-Blue-Tint);
    border-color: var(--Primary-Blue);
}

.time-group {
  display: flex;
  flex-direction: row;
  gap: 12px;
  width: fit-content;
  font-family: "Manrope",sans-serif;
  flex-wrap: wrap;
}

.timeButton {
  display: flex;
  align-items: center;
  padding: 10px 18px;
  border: 2px solid var(--Primary-Grey);
  border-radius: 24px;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  width: 90px;
}

/* hide default browser radio input */
.timeButton input[type="radio"] {
  display: none;
}

.timeContainer{
    background-color: white;
    border-radius: 24px;
    margin-top: 10%;
    padding-top: 20px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 20px;
    height: fit-content;
}

.volunteerSupplyNeeds{
    background-image: url("Assets/Upcoming\ visits.png");
    background-position: right;
    background-size: cover;
    border-radius: 24px;
    padding: 30px;
    margin-top: 15px;
}

.blueBgText{
    background-color: var(--Secondary-Blue-Tint);
    border-radius: 24px;
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
}

.confirmBooking{
    background-color: white;
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 4px 7px -4px rgba(0, 0, 0, 0.25);
    margin-top: 20px;
    margin-bottom: 20px;
}

/* account page */
  .profile-upload-row {
    display: flex;
    align-items: center;
    gap: 20px;
    font-family: "Manrope", sans-serif;;
    padding: 20px;
    background: var(--Secondary-Yellow-Lightest_Tint);
    border-radius: 24px;
    width: 100%;
  }

  /* profile picture placeholder */
  .profile-avatar-container {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--Secondary-Yellow-Shade);
    font-size: 16px;
    font-weight: 500;
    flex-shrink: 0;
    border: 2px dashed var(--Secondary-Yellow-Shade);
  }

  /* Right side content */
  .profile-action-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  /* upload button */
  .custom-upload-btn {
    display: inline-block;
    background-color: var(--Secondary-Yellow-Shade);
    color: white;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 100px;
    border: none;
    font-size: 16px;
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s, border-color 0.2s;
  }

  .custom-upload-btn:hover {
    background-color: var(--Secondary-Yellow-Tint);
    color: var(--Secondary-Yellow-Shade);
  }

  /* hide default file input*/
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

.accountContainer{
    background-image: url("Assets/account.png");
    background-position: right;
    background-size:auto;
    border-radius: 24px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 4px 7px -4px rgba(0, 0, 0, 0.25);
    margin-bottom: 20px;
}

.form-container {
    font-family: "Manrope", sans-serif;
    padding: 20px;
    background: white;
    border: 1px solid var(--Primary-Grey);
    border-radius: 12px;
    max-width: 800px;
  }

  /* 2-column layout per row */
  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .form-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .field-label {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
  }

  /* Input wrapper for positioning icons */
  .input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
  }

  .input-icon {
    position: absolute;
    left: 12px;
    color: black;
    display: flex;
    align-items: center;
    pointer-events: none;
  }

  /* form field styling */
  .form-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    color: #1f2937;
    background-color: white;
    border: 1px solid var(--Primary-Grey);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
  }

  /* padding for inputs that contain an icon */
  .icon-padding {
    padding-left: 38px;
  }

  .form-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  }

  /* Responsive fallback for smaller screens */
  @media (max-width: 540px) {
    .form-grid {
      grid-template-columns: 1fr;
    }
  }