body {
    font-family: Arial, sans-serif;
}

.estimated-income-container,
.portfolio-management {
    margin: 20px;
    padding: 15px;
}

.estimated-income-container {
    display: flex;
    justify-content: space-between;
}

.chart-container {
    height: 40vh;
    width: 100%; /* Full width of its parent */
    position: relative;
}
#income-info {
    display:none;
}
.income-info {
    width: 20%;
    padding-right: 10px;
}
#info-table td {
    vertical-align: middle;
    padding-top: 15px;
    padding-bottom: 15px;
    border: none;
}

#estimated-monthly-income-value, #average-dividend-yield-value {
    font-weight: bold;
    font-size: 1.75rem;
    letter-spacing: 1px;
    min-width: 93.25px;
}
p#estimated-annual-income {
    font-size: 4rem;
    text-align: center;
    min-height: 57px;
}
#chart-title, #estimated-annual-income-title {
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    padding: 0.75rem 1rem;
}
#income-info-placeholder {
    width: 20%;
    padding-right: 10px;
}
#income-info-placeholder-text {
    padding-left: 10px;
}
.income-chart {
    width: 80%;
}

#table-default-state {
    text-align: center;
    width: 100%;
}
.table-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f2f2f2; /* Bootstrap table header color */
    border: 1px solid #ddd; /* Bootstrap table border color */
    padding: 0.75rem 1rem; /* Similar to table cell padding */
}

.header-title {
    font-weight: bold;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Spacing between controls */
}

.header-controls input[type="text"],
.header-controls button {
    height: 38px; /* Adjust this value as needed to match the button heights */
    line-height: 38px; /* This helps vertically center the text */
}

.header-controls button,
.header-controls .form-control {
    padding: 0 12px; /* Adjust horizontal padding for aesthetic alignment */
}
#add-button {
    width: 75px;
}
.form-inline {
    display: flex;
    gap: 0.5rem; /* Spacing within the form */
}


#symbol-input {
    margin-right: 5px;
}


#income-table {
    width: 100%;
    border-collapse: collapse;
    border-bottom: 1px solid #DDD;
    border-left: 1px solid #DDD;
    border-right: 1px solid #DDD;
}

#income-table th {
    cursor: pointer;
    position: relative; /* Needed to position the pseudo-elements */
}

#income-table th,
#income-table td {
    vertical-align: middle;
}

#income-table th.sorting-asc::after,
#income-table th.sorting-desc::after {
    position: absolute;
    right: 10px; /* Position the arrow inside the padding area */
    top: 50%;
    transform: translateY(-50%);
}

#income-table th.sorting-asc::after {
    content: " \2191"; /* Unicode for upwards arrow */
}

#income-table th.sorting-desc::after {
    content: " \2193"; /* Unicode for downwards arrow */
}

input.allocation, .symbol, .name {
    text-align: left;
}

.next-pay-date, .dividend-yield, .dividend-per-share, .dividend-frequency, .estimated-annual-income {
    text-align: right;
}

.quantity {
    text-align: center;
}
#income-table-footer {
    display: none;
    font-weight: bold;
}
.income-table-footer-labels {
    text-align: right;
}
td#income-table-footer-total-estimated-annual-income {
    text-align: right;
}
td#income-table-footer-total-market-value {
    border-right: 1px solid #DDD;
}