/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Personal Finances */
.pf-card {
    border-radius: 33px;
    background-color: white;
    padding: 18px 27px;
    font-size: 13px;
    .title{
        font-size: 17px;
    }
}

.pf-table {
    th {
        font-weight: normal;
        font-size: 12px;
    }
}

.pf-spending-card {
    border: 1px solid black;
    border-radius: 33px;
    padding: 10px 24px;
    display: flex;
    justify-content: space-between;
    i {
        font-size: 24px;
        height: 33px;
    }
    .first-div {
        width: 48%;
        font-weight: bold;
        display: flex;
        flex-direction: column;
    }
    .percentage {
        /* background-color: #F6F6F6; */
        font-size: 40px;
        padding: 3px 15px;
        border-radius: 20px;
    }
}

.placeholder-grey input::placeholder {
    color: #d8d8d8;
}

.currency-select {
    font-size: 20px;
    background-color: #F6F6F6;
    padding: 10px 30px 10px 32px;
    border-radius: 21px;
    border: none;
    color: #494955;
}

main {
    color: #494955;
}

/* Chrome, Safari, Edge, Opera */
input.pf-number-input::-webkit-outer-spin-button,
input.pf-number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input.pf-number-input[type=number] {
  -moz-appearance: textfield;
}

.pf-number-input::before {
    content: "s/.";
    color: blue;
    font-style: italic;
  }