@import url('https://fonts.googleapis.com/css2?family=Vast+Shadow&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap');

/* ---------------------------------------------------- */
/* Basic Housekeeping                                   */
/* ---------------------------------------------------- */
* {
  font-size: 16px;
  box-sizing: border-box;
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  
}

body {
  margin: 0;
  padding: 0;
  background-color: #FFFFFF;
}


.pacifico-15 {
  color: #FF8C00;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 3px;
  font-family: "pacifico", cursive;
}

.vast-shadow {
  margin: 0;
  padding: 0;
  color: #FFFFFF;
  font-size: 30px;
  font-weight: 400;
  font-style: normal;	
  text-align: center;	
  font-family: "Vast Shadow", serif;
}

.cedarville-cursive {
  font-size: 32px;
  font-weight: 750;
  font-style: normal;
  letter-spacing: 2px;
  font-family: "Cedarville Cursive", cursive;
}


/* ---------------------------------------------------- */
/* Custom Typography                                    */
/* ---------------------------------------------------- */
.fulBlock {
  text-align: justify;
}

.label {
  margin-bottom: -8px;
}

.dashes {
  border: 3px dashed #008000;
  border-radius: 0.25rem;
}

.bg-nyanza {
  background-color: #e9ffdb;
}

.p11 {
  font-size: 11.5px;
}

.p16 {
  font-size: 16px;
}

.bg-skyblue {
  background-color: #B0E0E6;
}

.p8 {
  margin: 0;
  padding: 0;
  font-size: 11.5px;
}

.text-maruun {
  color: #820000;
}

.text-orange {
  color: #FF8C00;
}

.lobel {
  color: #820000;
  font-size: 16px;
  font-weight: bold;
}

.inpot {
  color: #000000;
  font-size: 16px;
  font-weight: bold;
}

.success {
  color: #28a745; /* Green */
}

.warning {
  color: #ffc107; /* Yellow */
}

.error {
  color: #dc3545; /* Red */
}



/* ---------------------------------------------------- */
/* Header Component(s)                                  */
/* ---------------------------------------------------- */
.bg-navbar {
  width: 97%;
  color: #FFFFFF;
  margin: 0 auto;
  background-color: #036;
  border-radius: 0 0 15px 15px;
  border-bottom: 5px solid #FF8C00;
}


/* ---------------------------------------------------- */
/* Header Profile Photo (tooltips)                      */
/* ---------------------------------------------------- */
.profile-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.profile-tooltip {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translate(-50%, 100%) scale(0.92);
  background: #036;
  color: #fff;

  /* ⭐ Increased padding for readability */
  padding: 8px 14px;
  
  border-radius: 6px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  
  /* Soft shadow */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  
  /* Smooth fade + scale + glide animation */
  transition:
	opacity 0.22s ease,
	transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  
  /* Hover delay */
  transition-delay: 90ms;  
}

.profile-tooltip::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #036 transparent;
}
  
.profile-avatar:hover + .profile-tooltip {
  opacity: 1;
  
  /* Glide + drop + scale */
  transform: translate(calc(-50% + 4px), 110%) scale(1);
  
  /* Remove delay on exit for snappy feel */
  transition-delay: 0ms; 
}

.block {
  box-shadow: 0px 0px 7px 1px rgba(45, 54, 68, 0.05);
  margin: 25px 0;
  padding: 25px;
  border-radius: 5px;
  background-color: #D5FFFF;
}

.block p {
  padding: 7px;
  margin: 0;
}

.profile-detail {
  display: flex;
  flex-flow: column;
  font-size: 18px;
  padding: 5px 0;
}

.profile-detail strong {
  display: block;
  color: #92979e;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}


/* ---------------------------------------------------- */
/* Footer Component(s)                                  */
/* ---------------------------------------------------- */
.footer {
  width: 97%;
  color: #FFFFFF;
  margin: 0 auto;
  font-size: 11.5px;
  text-align: center;
  background-color: #036;
  border-radius: 15px 15px 0 0;
  border-top: 5px solid #FF8C00;
}