/***********************************************************************
/ ir settings
/ Copyright (C) Logic Lovers Inc.
/ Released under the MIT License, https://opensource.org/licenses/MIT
/***********************************************************************/

/***********************************************************************
/ all
/***********************************************************************/
#loIdDivInvestment {
    padding: 24px;
    font-family: 'Noto Sans JP',sans-serif;
}

/***********************************************************************
/ grid
/***********************************************************************/
#loIdDivInvestment {
    --iPixelBlockMarginLR: calc( 2px + 46px * var(--bWideDevice) );
    --iPixelBlockMaxWidth: max( 320px , calc( 100% - var(--iPixelBlockMarginLR) * 2 ) );
    max-width: var(--iPixelBlockMaxWidth);
    margin: var(--iPixelBlockMarginUD) var(--iPixelBlockMarginLR);
    padding: 0;
}

#loIdDivInvestment .grid.maincontainer {
    padding: 11px calc( 2px + 9px * var(--bWideDevice) );
}

#loIdDivInvestment .grid {
    --sBgColorGridItem: white;
    background-color: white;
    margin: 0;
    padding: 0.7em;
    border: 4px solid #000000;
    max-width: 100%;
}
#loIdDivInvestment .griditem {
    padding: 2px 0;
    margin: 4px 0;
}
#loIdDivInvestment .griditem.colsspan2 {
    max-width: 100%;
}

/***********************************************************************
/ canvas
/***********************************************************************/
#loIdDivInvestment #loIdCanvasMain {
    margin: 0;
    max-width: min( 100vw , 100% );
    border: 2px solid #000000;
}

/***********************************************************************
/ input
/***********************************************************************/
/* investment amount */
#loIdDivInvestment input.amount {
    width: 10em;
    text-align: right;
}
/* month,month */
#loIdDivInvestment input.month2 {
    text-align: left;
    width: 3.5em;
}
/* years */
#loIdDivInvestment input.years {
    text-align: right;
    width: 3em;
}
/* buttons */
#loIdDivInvestment input[type="button"] {
    -webkit-appearance: none;
    padding: 0.5em 5em;
}

/* year rate (select) */
#loIdDivInvestment select {
    -webkit-appearance: none;
    max-width: 44vw;
}

/* small font */
#loIdDivInvestment .smallnen,
#loIdDivInvestment .smallyen,
#loIdDivInvestment .smallcomma {
    font-size: 85%;
}