/* IMPORT FONT */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');




/* BODY */
/* body {background-color: #EFEFEF;} */
/* .bold-text { font-weight: bold; } */

hide {display: none; /* This will hide the <em> tags from view but keep them in the document flow */}


/* GRIDS */
.grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.item1, .item2, .item3, .item4 {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    font-family: 'Roboto', sans-serif;
}

.item1 {
    grid-column: 1
    grid-row: span 1;
}

.item2 {
    grid-column: 1
    grid-row: span 1;
}

.item3 {
    grid-column: 1
    grid-row: span 1;
}

.item4 {
    grid-column: 1
    grid-row: span 1;
}





/* CONTAINERS */
.fixed_container { width: 80%; margin: 0 auto; padding: 20px; background-color: #d2f2f2; border-radius: 10px /* Rounded edges */; font-family: 'Roboto', sans-serif; }
.container { width: 80%; margin: 0 auto; padding: 20px; background-color: #ffffff; border-radius: 10px /* Rounded edges */; font-family: 'Roboto', sans-serif;}
.container1a { width: 80%; margin: 50px auto; padding: 20px; background: #FFFFFF; border-radius: 8px /* Rounded edges */; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); font-family: 'Roboto', sans-serif;}
.container2 { width: 40%; margin: 0 auto; padding: 20px; background-color: #ffffff; border-radius: 10px /* Rounded edges */; font-family: 'Roboto', sans-serif;}
.dropdown-container {display: flex; gap: 20px; align-items: center;}
.dropdown-container div {display: flex; flex-direction: column;}
.slider-container {display: flex;}
.slider-button {height: 18px; padding: 0px 0px; cursor: pointer;}


/* SECTIONS */
.section {margin-bottom: 20px; position: relative;}


/* FORMS */
.form-style-8 {position: relative; padding: 20px; background: #FFFFFF; margin: 50px auto; border-radius: 8px; max-width: 600px; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; align-items: center;}
.form-style-8 h2 {background: '#ffffff'; text-transform: none; color: #000000; font-size: 20px; font-weight: 400; padding: 15px 30px; margin: -40px -40px 30px -40px; width: 100%; border-top-left-radius: 10px; border-top-right-radius: 10px;}
.form-style-8 input[type="text"],
.form-style-8 input[type="date"],
.form-style-8 input[type="datetime"],
.form-style-8 input[type="email"],
.form-style-8 input[type="number"],
.form-style-8 input[type="search"],
.form-style-8 input[type="time"],
.form-style-8 input[type="url"],
.form-style-8 input[type="password"],
.form-style-8 textarea,
.form-style-8 select {box-sizing: border-box; outline: none; display: block; width: 100%; padding: 10px; border: 1px solid #ddd; background-color: white;}
.form-style-8 label {display: block; text-align: left;}


/* POP-UP BOXES */
.popup { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); z-index: 1; overflow: auto; }
.popup-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; border-radius: 5px; }
.popup-content label {display: block; margin-bottom: 10px; padding: 2px}
.popup-content input,
  .popup-content select {width: 100%; padding: 2px; margin-bottom: 10px; box-sizing: border-box}
.popup-close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
.popup-close:hover, .popup-close:focus { color: black; text-decoration: none; cursor: pointer; }
.middle {text-align: left;}


/* POP-UP BOXES - USER CHANGES */
.popup-change-dialog {display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);}
.popup-change-content {background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%;}
.change-close-btn {color: #aaa; float: right; font-size: 28px; font-weight: bold;}
.change-close-btn:hover, .change-close-btn:focus {color: black; text-decoration: none; cursor: pointer;}



/* TOOLTIPS */
.tooltip {position: absolute; top: 10px; right: 10px; display: inline-block;}
.tooltip .tooltiptext {visibility: hidden; width: 420px; background-color: #555; color: #fff; text-align: center; border-radius: 5px; padding: 5px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -110px; opacity: 0; transition: opacity 0.3s;}
.tooltip .tooltiptext::after {content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent;}
.tooltip:hover .tooltiptext {visibility: visible; opacity: 1;}


/* BUTTONS */
.add-pot-btn {background-color: #4CAF50;border: 1px solid #C3C3C3;color: white;padding: 10px 20px;text-align: center; text-decoration: none;display: inline-block;font-size: 16px;margin-top: 10px;cursor: pointer;border-radius: 5px;}
.back-btn {background-color: lightgray; border: 1px solid #C3C3C3; color: black; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin-top: 10px; cursor: pointer; border-radius: 5px;}
.cancel-pot-btn {background-color: #E12827; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin-top: 10px; cursor: pointer; border-radius: 5px; }
.top-right-btn {position: absolute; top: 10px; right: 60px; }
.disabled-btn { background-color: lightgray !important; cursor: not-allowed !important; }
.make-changes-btn {background-color: #4CAF50; border: 1px solid #C3C3C3; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin-top: 10px; cursor: pointer; border-radius: 5px;}




/* ICONS */
.info-icon {position: absolute; top: 10px; right: 10px; font-size: 20px; color: #888; cursor: pointer;}
.info-icon:hover {color: #000;}


/* PENSION TABLES */
.pension-pot {margin-bottom: 10px;}
.final-salary-pension {margin-bottom: 10px;}
.saving {margin-bottom: 10px;}
.other-cash {margin-bottom: 10px;}
.other-income {margin-bottom: 10px;}
.pension-table {border-collapse: collapse; width: 100%;}
.button-row {margin-top: 20px; /* Adds space between the input fields and the button row */}
.pension-table th, .pension-table td { border: 1px solid #ddd; padding: 8px; text-align: left; }
.pension-table th { background-color: #f2f2f2;}
.pension-table td button { background-color: #f44336; border: none; color: white; padding: 5px 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 12px; margin-left: 10px; cursor: pointer; border-radius: 3px; }
.bold-text { font-weight: bold; }
.pension-table tr td {border-bottom: 1px solid #ddd; /* Add a bottom border for all table cells */}
.pension-table tr td:last-child {border-bottom: 1px solid #ddd; /* Remove bottom border for the last cell in each row */}
.pension-table tr td:last-child {border-left: none; /* Remove bottom border for the last cell in each row */}
.pension-table tr td:first-child {border-right: none; /* Remove bottom border for the last cell in each row */}


/* DATE INPUT */
input[type="date"] {color: black; /* Ensures text is always black */}
input[type="date"]::-webkit-calendar-picker-indicator {filter: none; /* Resets any default styles that might alter the color */}
input[type="date"]:focus {color: black; /* Ensures text stays black on focus */}
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {color: black !important; /* Force text color to stay black */}
input[type="date"]::-webkit-datetime-edit-placeholder {color: black !important; /* Keep placeholder color black */}
input[type="date"]:focus::-webkit-datetime-edit-placeholder {color: black !important;}




  /* The Modal (background) */
  .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }

  /* Modal Content/Box */
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
  }

  /* The Close Button */
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }