* {
  box-sizing: border-box;
}

html {
    height: 100%;
}

.placeholder2 {
    background-color: red;
}

a, [onclick] {
    cursor: pointer;
}

/* Ensure <button> elements explicitly use the pointer cursor on hover */
button:hover {
    cursor: pointer;
}
.main {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  display: flex;
  flex-direction: column; /* Add this to stack elements on mobile */
  flex-wrap: wrap;       /* Add this to prevent overflow */
}

a.custom-underline {
  text-decoration: none;
  border-bottom: 1px solid transparent; /* Invisible border initially */
  transition: border-color 0.3s ease; /* Smooth transition for color change */
}

a.custom-underline:hover {
  border-bottom-color: currentColor; /* Underline appears matching text color */
    text-decoration: none;
}

a.card-link {
  display: block;
    margin: auto;
  width: 85%; /* Or the specific % you want */
  text-decoration: none; /* Removes underline */


}

body {
    font-family: "Noto Sans", sans-serif;
    background-color: #33465C;
    background-attachment: fixed;
    background-position: right;
    background-size: cover;

    /* SYSTEM STICKY FOOTER ENGINE VIA GRID */
    min-height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
    margin: 0;
}

.footer {
    width: 100%;
    max-width: 900px;     /* 3. Keeps the footer perfectly lined up with the content */
    margin: 0 auto;        /* 4. Centers the footer on desktop screens */
    background-color: #f9f9f9;
    color: #595c5a;
    font-size: 10px;
    padding: 15px 15px;    /* Added 15px side padding to match the content wrapper */
    grid-row-start: 2;     /* Forces attachment track position to the absolute page floor */
}


.customa {
  font-size: 25px;
  color: #595c5a;
  font-family: Arial;
  font-weight: bold;

}
.custom_template {
  font-size: 35px;
  color: #595c5a;
  font-family: Arial;
  font-weight: bold;

}

.customb {
  font-size: 20px;
  color: black;

}

.weatherInfo {
    color: #403f3e;
    font-size: 30px;
    float: left;
    font-family: Arial;
}

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(2,0,0,0.2);
  transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(2,0,0,0.2);
}

/* Add some padding inside the card container */
.container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.customform {
    margin: 10px;
    padding: 20px;
    border-radius: 8px;
    width: 100%;
    color: black;
}

.customform2 {
    padding-left: 20px;
    border-radius: 8px;
    background-color: #F9F9F9;
    color: #595c5a;
    font-size: 18px;
    height: 40px;
    width: 98%;
    border: 1px solid #ccc;
}

.custom_date_form {
    padding-left: 20px;
    border-radius: 8px;
    background-color: #F9F9F9;
    color: #595c5a;
    font-size: 18px;
    height: 40px;
    width: 50%;
    border: 1px solid #ccc;
}


.customform3 {
    padding: 20px;
    height: 175px;
    border-radius: 8px;
    width: 100%;
    border: 1px solid #ccc;
}

.customform4 {
    padding: 20px;
    border-radius: 8px;
    width: 50%;
    border: 1px solid #ccc;
}

.customform5 {
    padding: 8px 12px;
    border-radius: 8px;
    width: 25%;
    border: 1px solid #ccc;
}


.formcard {
    margin: auto;
    width: 50%;

}

.formcard1 {
    margin: auto;
    width: 100%;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    background-color: #F5FBFF;
    border-radius: 8px;

}

.formcard2 {
    margin: auto;
    width: 100%;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;

    border-radius: 8px;

}

.days_entry_card {
    margin: auto;
    width: 100%;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;

    border-radius: 8px;

}

.linkcard {
    margin: auto;
    width: 100%;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    border: 1px solid #26374A;
      border-radius: 8px;


}
.linkcard_subscribed {
    margin: auto;
    width: 100%;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    border: 1px solid rebeccapurple;
      border-radius: 8px;


}
.linkcard_not_subscribed {
    margin: auto;
    width: 100%;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    border: 1px solid darkgray;
      border-radius: 8px;
    background-color: #E0E0E0;

}



.hometitlecard {
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 25px;
    border-radius: 8px;




}

.message_card {
    margin: auto;
    width: 100%;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    border: 1px solid lightgreen;
       border-radius: 8px;
    background-color: lightgreen;

}

.message_card2 {
    margin: auto;
    width: 100%;

    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    border: 1px solid #b56edc;
      border-radius: 8px;
    background-color: #b56edc;

}

.upgrade_card {
    margin: auto;
    width: 100%;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    border: 1px solid #B5A9B9;
      border-radius: 8px;
    background-color: #B5A9B9

}
.upgrade_card2 {
    margin: auto;
    width: 100%;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    border: 1px solid #B5A9B9;
      border-radius: 8px;
    background-color: #B5A9B9

}

.upgrade_card3 {
    margin: auto;
    width: 100%;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    border: 1px solid #B5A9B9;
       border-radius: 8px;
    background-color: #B5A9B9

}

.formcard3 {
    margin: auto;
    width: 100%;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    border: 1px solid #B5A9B9;
    border-radius: 8px;
}

.grid-container {
  display: grid;
  /* minmax(0, 1fr) tells the grid it can shrink all the way to 0 if needed */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2px;
  width: 100%;
}

.grid-item {
  display: flex;
  min-width: 0; /* Prevents the flex item from overflowing the grid cell */
}

/* Ensure the form elements inside actually fill the space */
.grid-item > .label2,
.grid-item select,
.grid-item input {
  width: 100%;
}

/* Standard flag-icon-css class */
.flag-icon {
    width: 50px !important;  /* Change to your desired width */
    height: auto !important; /* Auto height maintains the flag's correct proportions */

}

/* If the library uses images inside the grid-item */
.grid-item img {
    width: 50px;
    height: auto;
    vertical-align: middle;
    position: relative;
    top: -4px;
    margin-right: 10px;
}

.premium_card {
    margin: auto;
    width: 100%;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    border: 2px solid #DDD5F3;
     border-radius: 8px;
}
.premium_delete_card {
    margin: auto;
    width: 100%;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    border: 1px solid #FF7733;
    border-radius: 8px;
}

.premium_card2 {
    margin: auto;
    width: 100%;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    border: 1px solid #b56edc;
    border-radius: 8px;

}

.premium_citizenship_card {
    margin: auto;
    width: 100%;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;

    background-color: #f9f3fe;;
    border-radius: 8px;
    color: darkmagenta;
    text-align: center;

}

.main-content-wrapper {
    background-color: #FFFFFF; /* Keeps the main content area white */
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    grid-row-start: 1;
    width: 100%;
    max-width: 900px;     /* 1. Stops the content from stretching too wide */
    margin: 0 auto;        /* 2. Centers the content on desktop screens */
    padding: 0 15px;       /* Adds clean structural spacing on mobile screens */
}

.main_premium_card {
    margin: auto;
    width: 100%;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    border: 2px solid #b56edc;
      border-radius: 8px;
}
.select_card {

    height: 210px;
    background-color: #26374A;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    background-color: rgba(38, 55, 74, 0.70);
    border-radius: 8px;
}

.fourohfour_select_card {

    height: 400px;
    background-color: #26374A;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    background-color: rgba(38, 55, 74, 0.70);
    border-radius: 8px;
}

.error_select_card {

    height: 350px;
    background-color: #26374A;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    background-color: rgba(38, 55, 74, 0.4);
    border-radius: 8px;
}

.select1 {
  font-family: Arial;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 22px;
  padding-bottom: 8px;

 }

.select2 {
  font-family: Arial;
  color: #FFFFFF;
  font-size: 16px;
  padding-bottom: 8px;


 }
.select2bold {
  font-family: Arial;
  color: #FFFFFF;
  font-size: 16px;
  padding-bottom: 8px;
  font-weight: bold;

 }
.home_photo_card {
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 25px;
    border-radius: 8px;
}

.fourohfour_card {
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 8px;
    height: 500px;
}

.error_photo_card {
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 25px;
    border-radius: 8px;
    aspect-ratio: 16 / 9;
}

.row::after {
  content: "";
  display: table;
  clear: both;
}

.span1 {
  font-family: Arial;
  color: #595c5a;
  font-size: 15px;
}


.span2 {
  font-family: Arial;
  color: red;
  font-size: 10px;
}


input[type="date"] {
  width: 150px;
  padding: 8px 12px;
  border: 1px solid #ccc;
    border-radius: 8px;
  background-color: #f9f9f9;
  color: #595c5a;
  font-family: Arial, sans-serif;
  font-size: 18px;
  outline: none; /* Removes default outline on focus */
}

input[type="date"]:focus {
  border-color: #007bff; /* Highlight border on focus */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

input[type="email"] {
  width: 125%;
  padding: 8px 12px;
  border: 1px solid #ccc;
    border-radius: 8px;
  background-color: #f9f9f9;
  color: #595c5a;
  font-family: Arial, sans-serif;
  font-size: 18px;
  outline: none; /* Removes default outline on focus */

}

.number-input {
  width: 100px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
  color: #595c5a;
  font-family: Arial, sans-serif;
  font-size: 18px;
  outline: none; /* Removes default outline on focus */

}



input[type="country"] {
  width: 200px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
  color: #595c5a;
  font-family: Arial, sans-serif;
  font-size: 18px;
  outline: none; /* Removes default outline on focus */
}


select {
  appearance: none; /* Removes default browser styling */
  -webkit-appearance: none; /* For Safari */
  -moz-appearance: none; /* For Firefox */
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 8px 12px;
      border-radius: 8px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #595c5a;
  width: 45%; /* Adjust as needed */
  cursor: pointer;
}

/* Styling for when the select is focused */
select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Styling for options (limited) */
select option {
  background-color: #fff;
  color: #333;
}

.label1 {
  font-family: Arial;
  color: #595c5a;
  font-weight: bold;
  font-size: 20px;
  padding-bottom: 8px;
 }

.entry_error {
  font-family: Arial;
  color: darkorange;
  font-weight: bold;
  font-size: 12px;
  padding-bottom: 8px;
 }

 .sub_success_span {
  font-family: Arial;
  color: green;
  font-weight: bold;
  font-size: 20px;
  padding-bottom: 8px;
 }

 .label2 {
  font-family: Arial;
  color: #595c5a;
  font-size: 18px;
  padding-bottom: 8px;
 }

  .label2bold {
  font-family: Arial;
  color: #595c5a;
  font-size: 18px;
  padding-bottom: 8px;
  font-weight:bold;

 }

   .slabel2 {
  font-family: Arial;
  color: #595c5a;
  font-size: 16px;
  padding-bottom: 8px;
 }

  .slabel2bold {
  font-family: Arial;
  color: #595c5a;
  font-size: 16px;
  padding-bottom: 8px;
  font-weight:bold;

 }

    .label2boldorange {
  font-family: Arial;
  color: orange;
  font-size: 18px;
  padding-bottom: 8px;
  font-weight:bold;

 }

  .label2bold2 {
  font-family: Arial;
  color: #595c5a;
  font-size: 18px;
  padding-bottom: 8px;
  font-weight:bold;
  float: right;
 }

    .label2boldsmall {
  font-family: Arial;
  color: #595c5a;
  font-size: 16px;
  padding-bottom: 8px;
  font-weight:bold;

 }
        .label2small {
  font-family: Arial;
  color: #595c5a;
  font-size: 16px;
  padding-bottom: 8px;


 }


.label3 {
  font-family: Arial;
  color: #595c5a;
  font-size: 28px;
  padding-bottom: 15px;
  font-weight: bold;
 }

   .label4bold {
  font-family: Arial;
  color: #595c5a;
  font-size: 22px;
  padding-bottom: 8px;
  font-weight:bold;
 }

      .label3bold {
  font-family: Arial;
  color: #595c5a;
  font-size: 28px;
  padding-bottom: 8px;
  font-weight:bold;
 }

 .button1 {
     border-radius: 8px;
  border: 1px solid grey;
  font-size: 30px;
  font-weight: bold;
  width:50%;
  height: 75px;

  background-color: lightblue;
  color:white;

 }

  .button2 {
  border-radius: 8px;
  border: 1px solid #26374A;
  font-size: 30px;
  font-weight: bold;
  width:100%;
  height: 98px;
  justify:center;
  background-color: #26374A;
  color:white;

 }

   .button3 {
  border-radius: 8px;
  text-align: center;
  border: 1px solid #22BB33;
  font-size: 15px;
  font-weight: bold;
  width:100px;
  height: 40px;
  justify: center;
  background-color: #e8f5e9;
  color: darkgreen;
 }

     .add_button {
  border-radius: 8px;
  text-align: center;
  border: 1px solid #22BB33;
  font-size: 14px;
  font-weight: bold;
  width:100%;
  height: 60px;
  justify: center;
  background-color: #e8f5e9;
  color: darkgreen;
 }

         .add_button_journal {
  border-radius: 8px;
  text-align: center;
  border: 1px solid goldenrod;
  font-size: 18px;
  font-weight: bold;
  width:100%;
  height: 60px;
  justify: center;
  background-color: lightyellow;
  color: #F78700;
 }

.addjournalentryframe {
    /* 1. Change display to block so it behaves like a true structural container */
    display: block;

    /* 2. CRITICAL: Forces padding and borders to stay INSIDE the 100% width */
    box-sizing: border-box;

    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid goldenrod;
}

/* 3. Force any image inside this frame to scale perfectly to the text width */
.addjournalentryframe img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

.enhancedpremiumframe {
    /* 1. Change display to block so it behaves like a true structural container */
    display: block;

    /* 2. CRITICAL: Forces padding and borders to stay INSIDE the 100% width */
    box-sizing: border-box;

    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #b56edc;
}

/* 3. Force any image inside this frame to scale perfectly to the text width */
.enhancedpremiumframe img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}


    .button4 {
  border-radius: 8px;
  text-align: center;
  border: 1px solid #FF5B61;
  font-size: 14px;
  font-weight: bold;
  justify: center;
  width:80px;
  height: 30px;
  background-color: #FF5B61;
  color:white;

 }

     .confirm_delete_button {
  border-radius: 8px;
  text-align: center;
  border: 1px solid #FF5B61;
  font-size: 14px;
  font-weight: bold;
  justify: center;
  width:80px;
  height: 30px;
  background-color: #FF5B61;
  color:white;

 }

          .cancel_delete_button {
  border-radius: 8px;
  text-align: center;
  border: 1px solid #FF7733;
  font-size: 14px;
  font-weight: bold;
  justify: center;
  width:80px;
  height: 30px;
  background-color: #FF7733;
  color:white;

 }

     .manage_user_button {
    border-radius: 8px;
  text-align: center;
  border: 1px solid grey;
  font-size: 18px;
  font-weight: bold;
  justify: center;
  width:160px;
  height: 35px;
  background-color: lightblue;
  color:white;

 }

     .checkout_button {
     border-radius: 8px;
  text-align: center;
  border: 1px solid grey;
  font-size: 18px;
  font-weight: bold;
  justify: center;
  width:160px;
  height: 40px;
  background-color: lightgreen;
  color:white;

 }

 .button5 {
    border-radius: 8px;
  border: 1px solid grey;
  font-size: 30px;
  font-weight: bold;
  width:200px;
  height: 150px;
  justify:center;
  background-color: lightblue;
  color:white;

 }
     .button6 {
    border-radius: 8px;
  text-align: center;
  border: 1px solid grey;
  font-size: 18px;
  font-weight: bold;
  justify: center;
  width:80px;
  height: 40px;
  background-color: orange;
  color:white;

 }

  .loginbutton {
  border-radius: 8px;
  border: 1px solid #26374A;
  font-size: 16px;
  width:120px;
  height: 50px;
  justify:center;
  background-color: #26374A;
  color:white;
  font-weight: bold;
  font-family: "Noto Sans",sans-serif;

 }

  .verifyframe {
    display: inline-block;

    padding: 10px;
    border-radius: 8px;
    border: 1px solid #FCE7E6;
    width: 100%;
}

.verifyfull {
    display: inline-block;
    color: #C55200;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 10px;
    background-color: oldlace;
    border-radius: 8px;
    border: 1px solid orangered;
    width: 100%;
    height: 60px;
}

.verifybutton {
    display: flex;
    justify-content: center; /* Horizontally centers the text */
    align-items: center;
    text-decoration: none;
    color: #C55200;
    font-weight: bold;
    font-size: 14;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #F7DCAF;
    border-radius: 8px;
    border: 1px solid #C55200;
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    cursor: pointer;
}

.irccapplicationdata {
    display: flex;
    justify-content: flex-start;
    font-size: 15px;
    align-items: center;
    text-align: left;
    text-decoration: none;
    color: #C55200;
    margin-bottom: 10px;
    padding: 10px 15px;
    background-color: #F7DCAF;
    border-radius: 8px;
    border: 1px solid #C55200;
    width: 75%;
    height: 70px;
    box-sizing: border-box;
}

.upgradeprompt {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    color: darkmagenta;
    text-decoration: none;

    padding: 10px 15px;
    background-color: #f9f3fe;
    border: 1px solid #b56edc;
    border-radius: 8px;

    width: 75%;
    height: 70px;
    box-sizing: border-box;
}

.upgradeprompttag {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    color: darkmagenta;
    text-decoration: none;

    padding: 10px 15px;
    background-color: #f9f3fe;
    border: 1px solid #b56edc;
    border-radius: 8px;

    width: 100px;
    height: 30px;
    box-sizing: border-box;
}
.user-info-container {
    display: inline-flex;
    flex-direction: column; /* Stacks the email and Enhanced span vertically */
    align-items: flex-start;
}
.user-info-container .row {
    margin-bottom: 4.5px; /* Adjust this value to bring them closer or further apart */
}

.upgradesubbutton {
    display: flex;
    justify-content: flex-start;
    font-size: 20px;
    align-items: center;
    text-align: left;
    text-decoration: none;
    color: darkmagenta;
    margin: auto;

    font-weight: bold;
    padding: 10px 15px;
    background-color: #f9f3fe;
    border-radius: 8px;
    border: 1px solid #b56edc;
    width: 100%;
    height: 70px;
    box-sizing: border-box;
}
.entry_success_message {
    display: none;
    color: darkgreen;
    font-weight: bold;
    font-size: 14px;
    height: 30px;
    width :210px;
    background-color: #e8f5e9;
    border-radius: 8px;
    pointer-events: none;
    align-items: center;
    justify-content: center;
    margin-top: 10px;">

}

.citizenshipapplication {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    text-decoration: none;
    color: darkgreen;
    margin-bottom: 10px;
    padding: 10px 15px;
    background-color: #e8f5e9;
    border-radius: 8px;
    border: 1px solid #22BB33;
    width: 75%;
    height: 70px;
    box-sizing: border-box;
}



.citizenshiplocked {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    text-decoration: none;
    color: darkred;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 10px 15px;
    background-color: #F7DDDD;
    border-radius: 8px;
    border: 1px solid indianred;
    width: 75%;
    height: 70px;
    box-sizing: border-box;
 }

.citizenshipapplication2 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    text-decoration: none;
    color: darkblue;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 10px 15px;
    background-color: aliceblue;
    border-radius: 8px;
    border: 1px solid deepskyblue;
    width: 75%;
    height: 70px;
    box-sizing: border-box;
}

.citizenshipapplication3 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    text-decoration: none;
    color: darkmagenta;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 10px 15px;
    background-color: #f9f3fe;
    border-radius: 8px;
    border: 1px solid #b56edc;
    width: 75%;
    height: 70px;
    box-sizing: border-box;
}

.citizenshipapplication4 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;

    text-decoration: none;
    color: #C55200;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 10px 15px;
    background-color: #FFF8ECFF;
    border-radius: 8px;
    border: 1px solid #C55200;
    width: 75%;
    height: 70px;
    box-sizing: border-box;
}

.citizenship_status {
    text-decoration: none;
    color: darkblue;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 10px 15px;
    background-color: aliceblue;
    border-radius: 8px;
    border: 1px solid deepskyblue;
    width: 100%;
    height: auto;
    box-sizing: border-box;
}





.pricetag {
    display: flex;
    justify-content: center; /* Centers items horizontally */
    align-items: center;     /* Centers items vertically */
    color: darkgreen;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #e8f5e9;
    border-radius: 8px;
    height: 30px;
    width: 140px;

}


.verifybuttonsmall {
    display: inline-block;
    color: #C55200;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #FFF8ECFF;
    border-radius: 8px;
    font-size: 14px;
}


.confirmedbuttonsmall {
    display: inline-block;
    color: darkmagenta;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #f9f3fe;
    border-radius: 8px;
    font-size: 14px;

}

.confirmedbuttonsmallfull {
    display: inline-block;
    color: darkgreen;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #e8f5e9;
    border-radius: 8px;
    font-size: 14px;
    border: 1px solid #e8f5e9;
    width: 100%;
}

.confirmedbutton {
    display: inline-block;
    color: darkgreen;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #e8f5e9;
    border-radius: 8px;
    font-size: 14px;
    border: 1px solid #e8f5e9
}

.prconfirmationbutton {
    display: inline-block;
    color: #005D5D;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #E9F0F0;
    border-radius: 8px;
    border: 1px solid #005D5D;
    font-size: 16px;
    width: 100%;
    height: 60px;
}

.prgrantcard {
    margin: auto;
    width: 100%;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    border: 1px solid #005D5D;
    border-radius: 8px;

}


.immigrationbutton {
    display: inline-block;
    color: darkblue;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 10px;
    background-color: aliceblue;
    border-radius: 8px;
    border: 1px solid deepskyblue;
    font-size: 16px;
    width: 100%;
    height: 60px;
}


.immigrationframe {
    display: inline-block;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 8px;
   border: 1px solid deepskyblue;
    width: 100%;
}


.citizenshipframe {
    display: inline-block;
    margin-bottom: 10px;
    padding: 20px;
    border-radius: 8px;
   border: 1px solid lightgray;
    width: 100%;
}

.citizenshipframelight {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px;
    border-radius: 8px;
   border: 1px solid lightgray;
    width: 100%;
}

.immigrationframe2 {
    display: inline-block;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 8px;
   border: 1px solid steelblue;
    width: 100%;
}


.upgradebutton {
    display: inline-block;
    color: darkmagenta;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #f9f3fe;
    border-radius: 8px;
    border: 1px solid #b56edc;
    font-size: 16px;
    width: 100%;
    height: 60px;
}

.upgradebutton_statement {
    display: inline-block;
    color: darkmagenta;
    padding: 10px;
    background-color: #f9f3fe;
    border-radius: 8px;
    border: 1px solid #b56edc;
    font-size: 18px;
    width: 100%;

}

.upgradeframe {
    display: inline-block;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #b56edc;
    width: 100%;
}

.trcard1 {
    margin: auto;
    width: 100%;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    border: 1px solid fuchsia;
    border-radius: 8px;
}

.trcard2 {
    margin: auto;
    width: 100%;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    border: 1px solid lightskyblue;
    border-radius: 8px;
}

.trcard3 {
    margin: auto;
    width: 100%;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    border: 1px solid limegreen;
    border-radius: 8px;
}

.prcard1 {
    margin: auto;
    width: 100%;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    border: 1px solid coral;
    border-radius: 8px;
}





    .dashboardbutton {
  border-radius: 8px;
  border: 1px solid #26374A;
  font-size: 16px;
  width:35%;
  height: 50px;
  justify:center;
  background-color: #26374A;
  color:white;
  font-weight: bold;
  font-family: "Noto Sans",sans-serif;

 }

        .milestonebutton {
  border-radius: 8px;
  border: 1px solid #26374A;
  font-size: 16px;
  width:35%;
  height: 50px;
  justify:center;
  background-color: #26374A;
  color:white;
  font-family: "Noto Sans",sans-serif;

 }

         .addstampbutton {
  border-radius: 8px;
  border: 1px solid #26374A;
  font-size: 16px;
  width:25%;
  height: 30px;
  justify:center;
  background-color: #26374A;
  color:white;
  font-family: "Noto Sans",sans-serif;

 }

        .expand_button {
  border-radius: 8px;
  border: 1px solid #26374A;
  font-size: 16px;
  font-weight: bold;
  width:100%;
  height: 60px;
  justify:center;
  background-color: #26374A;
  color: white;

  font-family: "Noto Sans",sans-serif;
  float:left

 }

               .immigrationrecord {
  border-radius: 8px;
  border: 1px solid indianred;
  font-size: 16px;
  font-weight: bold;
  width:100%;
  height: 60px;
  justify:center;
  background-color: #F7DDDD;
  color: darkred;

  font-family: "Noto Sans",sans-serif;
  float:left

 }

                              .immigrationrecordmenu {
  border-radius: 8px;
  border: 1px solid deepskyblue;
  width:100%;


    margin: auto;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;


 }

        .journalmenu {
    border-radius: 8px;
    border: 1px solid green;
    width:100%;

    margin: auto;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
 }


               .immigrationrecordframe {
    display: inline-block;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 8px;
   border: 1px solid indianred;
    width: 100%;
}

                .reset_button {
  border-radius: 8px;
  border: 1px solid #26374A;
  font-size: 12px;
  width:60px;
  height: 25px;
  justify:center;
  background-color: #26374A;
  color:white;

  font-family: "Noto Sans",sans-serif;
  float:left

 }
  .logoutbutton {
  border-radius: 8px;
  border: 1px solid #737CD1;
  font-size: 18px;
  font-weight: bold;
  width:90px;
  height: 35px;
  justify:center;
  background-color: #737CD1;
  color:white;
  font-weight: bold;
  float: right;
 }

   .verify_email_button {
    border-radius: 8px;
  border: 1px solid orange;
  font-size: 14px;
  font-weight: bold;
  width: 170px;
  height: 25px;
  justify:center;
  background-color: orange;
  color:white;
  float: left;
 }

     .cancel_subscription_button {
  border: 1px solid orange;
    border-radius: 8px;
  font-size: 18px;
  display: grid;
  place-items: center;
  font-weight: bold;
  width: 100%;
  height: 60px;
  background-color: orange;
  color:white;
 }



      .subscription_button {
  border: 1px solid #26374A;
     border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  width: 100%;
  height: 60px;
  background-color: #26374A;
  color:white;
 }

   .email_verified_button {
    border-radius: 8px;
  border: 1px lightgreen;
  font-size: 14px;
  font-weight: bold;
  width: 170px;
  height: 25px;
  justify:center;
  background-color: #1FD755;
  color:white;
  float: left;
 }

 .email_not_verified_span {
  font-size: 18px;
  color: orange;
  font-family: Arial;
  font-weight: bold;
  float: left;

 }

 .email_sent_span {
  font-size: 16px;
  color: white;
  font-family: Arial;
  font-weight: bold;
  float: left;

 }

.horizontal-line {
  width: 100%; /* Stretches the line across the entire width of its container */
  height: 2px; /* Sets the thickness of the line */
  background-color: #38414D; /* Sets the color of the line */
  margin: 10px 0; /* Optional: adds spacing above and below */
}

@media screen and (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

/* Adjust layout for tablets in portrait orientation (768px and up) */
@media screen and (min-width: 768px) {
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.autosize-date {
  /* Requires browser support (Chrome/Edge) */
  field-sizing: content;

  /* Ensure it doesn't collapse to zero if empty */
  min-width: 150px;

  /* Fallback for non-supported browsers */
  width: auto;
  padding: 8px;
  border-radius: 8px;
    border: 1px solid #ccc;

}



.custom-dropdown-select {
    /* Basic styling */
    padding: 10px 15px;
    font-size: 16px;
    border: 1px solid #ccc;
       border-radius: 8px;
    width: 300px;
    background-color: #f9f9f9;
    color: #333;
    cursor: pointer;

    /* Remove default system styling for a more custom look */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;


}

.custom-dropdown-select:hover {
    border-color: #aaa;
}

.custom-dropdown-select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}




@media (min-width: 900px) {
  body {
    padding-left: 17%;
    padding-right: 17%;
  }
}
@media (max-width: 480px) {
    .loginbutton {
        float: none !important;
        display: block;
        margin-top: 10px;
        width: 100%; /* Makes the login button easy to tap on mobile */
    }
}

/* Keep the container for alignment */
.custom-row {
    display: flex;
    align-items: center;      /* This aligns the centers of the field and button */
    justify-content: space-between;
    gap: 10px;
}
.field-wrapper {
    flex: 1;
}
/* Only remove the vertical offsets from the button and input */
.field-wrapper input,

.button3 {
    margin: 0 !important;      /* Removes top/bottom spacing that causes shifting */
    vertical-align: middle;    /* Extra insurance for alignment */
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    column-gap: 30px;               /* This is the gap between left and right */
    row-gap: 20px;                  /* Space between the rows */
    max-width: 800px;               /* Adjust based on your layout width */
}

.field-group {
    display: flex;
    flex-direction: column;         /* Keeps label on top of input */
    gap: 5px;                       /* Small space between label and input */
}

.full-width {
    grid-column: 1 / span 2;        /* Forces field to take up the whole row */
}

.residency-grid {
    display: grid !important;       /* !important helps override any hidden framework styles */
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    column-gap: 25px;               /* Space between the two columns */
    row-gap: 15px;                  /* Space between the rows */
}

.field-group {
    display: flex;
    flex-direction: column;         /* Keeps label on top of input */
    min-width: 0;                   /* Prevents fields from growing too large */
}

.full-row {
    grid-column: 1 / span 2;        /* Forces the field to take the whole row */
}

/* Ensure Django's generated fields fit within the columns */
.field-group input,
.field-group select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.button-row {
    margin-top: 20px;
}

.country-select-flag {
    height: 35px !important;    /* Match your preference */
    width: auto !important;
    display: inline-block;
    vertical-align: middle;     /* Standard fallback */
    margin: 0 !important;       /* Removes any default padding pushing it down */
    flex-shrink: 0;             /* Prevents the flag from squishing */
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
    margin-bottom: 20px;
}

/* Hide default checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The track (slider) */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

/* The moving knob */
.slider:before {
  position: absolute;
  content: "";
  height: 18px; width: 18px;
  left: 3px; bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

/* On state colors */
input:checked + .slider { background-color: #26374A; }
input:checked + .slider:before { transform: translateX(26px); }

. entrysuccess {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    color: darkgreen;
    font-weight: bold;
    font-size: 18px;
    width: 100%;
    padding: 15px 0;
    background-color: #e8f5e9;
    border-radius: 8px;
    pointer-events: none;
    align-items: center;
    justify-content: center;
}

@media (min-width: 900px) {

    .main-content-wrapper,
    .footer {
        max-width: 900px; /* This sets the hard limit so it stops stretching */
        margin-left: auto;  /* Centers the container by pushing from the left */
        margin-right: auto; /* Centers the container by pushing from the right */
    }

}