#account #subnav {
    /*width: 100%;*/
    width: 300px;
    background-color: #f7f7f7;
    border-bottom: 2px solid #e1e1e1;
    float: right;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
}

    #account #subnav:after {
        display: block;
        content: '';
    }

    #account #subnav li {
        float: right;
        width: 120px;
    }

#account dl dd {
    display: inline;
    margin: 0;
}

    #account dl dd:after {
        display: block;
        content: '';
    }

#account dl dt {
    display: inline-block;
    font-weight: bold;
    min-width: 100px;
}

#loansNote {
    background-color: #f3f3f3;
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 15px;
}

#loanGrid {
    display: flex;
    flex-wrap: wrap;
}

    #loanGrid .loan {
        margin-top: 14px;
        border: 2px solid #f1f1f1;
        border-radius: 15px;
    }

        #loanGrid .loan.multi {
            flex-basis: 100%;
            margin-left: 0;
        }

        #loanGrid .loan .loan-header {
            display: flex;
            align-items: center;
            border-bottom: 2px solid #f1f1f1;
            padding: 14px;
        }

            #loanGrid .loan .loan-header .logo {
                display: flex;
                margin-left: auto;
            }

                #loanGrid .loan .loan-header .logo img {
                    width: 32px;
                    height: 32px;
                }

            #loanGrid .loan .loan-header .loan-info {
                display: flex;
            }

                #loanGrid .loan .loan-header .loan-info span:first-child {
                    margin-right: 10px;
                }

        #loanGrid .loan .loan-amounts {
            display: flex;
            justify-content: space-between;
            padding: 0 14px;
        }

            #loanGrid .loan .loan-amounts div.box {
                padding-top: 14px;
            }

                #loanGrid .loan .loan-amounts div.box:last-child {
                    text-align: right;
                }

                #loanGrid .loan .loan-amounts div.box div.label {
                    color: gray;
                }

                #loanGrid .loan .loan-amounts div.box div.amount {
                    font-size: 18pt;
                    font-weight: bold;
                }

        #loanGrid .loan div.box.center {
            text-align: center;
        }

            #loanGrid .loan div.box.center div.amount {
                font-size: 18pt;
                font-weight: bold;
            }

        #loanGrid .loan .loan-dates {
            display: flex;
            justify-content: space-between;
            padding: 0 14px;
        }

            #loanGrid .loan .loan-dates div.box {
                padding-top: 14px;
            }

                #loanGrid .loan .loan-dates div.box:last-child {
                    text-align: right;
                }

                #loanGrid .loan .loan-dates div.box div.label {
                    color: gray;
                }

                #loanGrid .loan .loan-dates div.box div.date {
                    font-weight: bold;
                }

        #loanGrid .loan .loan-postpone-date {
            text-align: center;
            padding-top: 14px;
            margin-top: 14px;
            border-top: 2px solid #f1f1f1;
        }

            #loanGrid .loan .loan-postpone-date div.box div.label {
                color: gray;
            }

            #loanGrid .loan .loan-postpone-date div.box div.date {
                font-weight: bold;
            }

        #loanGrid .loan .loan-summary {
            text-align: center;
            padding-bottom: 14px;
            margin-top: 14px;
            border-top: 2px solid #f1f1f1;
        }

            #loanGrid .loan .loan-summary div.box {
                width: 100%;
                padding: 14px 0;
            }

                #loanGrid .loan .loan-summary div.box div.label {
                    color: gray;
                }

                #loanGrid .loan .loan-summary div.box div.amount {
                    font-size: 18pt;
                    font-weight: bold;
                }

                #loanGrid .loan .loan-summary div.box div.date {
                    font-weight: bold;
                }

        #loanGrid .loan > .loan-data {
            display: flex;
            justify-content: space-between;
            padding: 0 14px;
        }

            #loanGrid .loan > .loan-data div.box {
                padding-top: 14px;
            }

                #loanGrid .loan > .loan-data div.box:last-child {
                    text-align: right;
                }

                #loanGrid .loan > .loan-data div.box div.label {
                    color: gray;
                }

                #loanGrid .loan > .loan-data div.box div.value {
                    font-weight: bold;
                }

                #loanGrid .loan > .loan-data div.box div.big-value {
                    font-size: 18pt;
                    font-weight: bold;
                }

        #loanGrid .loan.multi .installments-container {
            padding: 14px;
            margin-bottom: 0px;
        }

            #loanGrid .loan.multi .installments-container h3 {
                margin: 0px;
            }

            #loanGrid .loan.multi .installments-container .installment-description {
                margin-top: 10px;
            }

            #loanGrid .loan.multi .installments-container ul {
                margin: 0px;
            }

            #loanGrid .loan.multi .installments-container .installment {
                position: relative;
            }

                #loanGrid .loan.multi .installments-container .installment .installment-paid-label {
                    display: none;
                }

                #loanGrid .loan.multi .installments-container .installment .installment-overdue-label {
                    display: none;
                }

                #loanGrid .loan.multi .installments-container .installment.active .installment-overdue-label {
                    display: block;
                    opacity: 0.9;
                    position: absolute;
                    top: 20px;
                    right: -30px;
                    transform: rotate(45deg);
                    background-color: red;
                    color: white;
                    padding: 5px 10px;
                    font-weight: bold;
                    z-index: 1;
                    width: 130px;
                    text-align: center;
                }

                #loanGrid .loan.multi .installments-container .installment.paid {
                    background-color: #f0f0f0;
                    color: #999999;
                    opacity: 0.5;
                    pointer-events: none;
                }

                    #loanGrid .loan.multi .installments-container .installment.paid .installment-paid-label {
                        display: block;
                        opacity: 0.9;
                        position: absolute;
                        top: 20px;
                        right: -40px;
                        transform: rotate(45deg);
                        background-color: green;
                        color: white;
                        padding: 5px 10px;
                        font-weight: bold;
                        z-index: 1;
                        width: 130px;
                        text-align: center;
                    }

        #loanGrid .loan.multi .loan-summary {
            text-align: center;
            padding: 14px 0px 0px;
        }

    #loanGrid:after {
        display: block;
        content: '';
        clear: both;
    }

    #loanGrid table.amounts {
        width: 200px;
        margin: auto;
    }

        #loanGrid table.amounts td.left {
            text-align: left;
        }

        #loanGrid table.amounts td.right {
            text-align: right;
        }

        #loanGrid table.amounts td.total {
            border-top: 2px solid #e1e1e1;
            font-weight: bold;
        }

    #loanGrid .ok {
        color: green;
        font-weight: bold;
    }

    #loanGrid .after-due-date {
        color: red;
        font-weight: bold;
    }

.credit-status {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 15px;
    border-bottom: 1px solid black;
}

    .credit-status .credit-available {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
        height: 50%;
        font-weight: bold;
    }

        .credit-status .credit-available .value {
            padding: 8px;
            border: 2px solid #EF3D43;
            border-radius: 10px;
        }

    .credit-status .credit-help {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        text-align: justify;
        height: 50%;
        font-size: 13px;
    }

    .credit-status .column {
        margin: 0px 0px 10px 0px;
    }

table.account-table {
    width: 100%
}

    table.account-table td td.left {
        text-align: left;
    }

    table.account-table td td.right {
        text-align: right;
    }

    table.account-table td a {
        color: black;
    }

@media (min-width: 768px) {
    #loanGrid {
        flex-direction: row;
    }

        #loanGrid .loan.single {
            flex-basis: 48%;
            margin-left: 20px;
        }
}

@media (max-width: 1023px) {
    #loanGrid > .loan.single:nth-child(2n+1) {
        margin-left: 0;
    }
}

@media (min-width: 1024px) {
    #loanGrid .loan.single {
        flex-basis: 32%;
        margin-left: 13px;
    }

    #loanGrid > .loan.single:nth-child(3n+1) {
        margin-left: 0;
    }

    #apply-old-debt  #loanGrid > .loan.single:nth-child(3n+1) {
        margin-left: 13px;
    }
}

@media (max-width: 767px) {
    #loanGrid {
        flex-direction: column;
    }
}
/*#account-settings {
    display: inline-block;
    width: 100%;
    max-width: 320px;
    background-color: #99ca3c;
    background: -webkit-gradient(linear, left top, left bottom, from(#99ca3c), to(#8bba33));
    background: -webkit-linear-gradient(top, #99ca3c, #8bba33);
    background: -moz-linear-gradient(top, #99ca3c, #8bba33);
    background: -ms-linear-gradient(top, #99ca3c, #8bba33);
    background: -o-linear-gradient(top, #99ca3c, #8bba33);
    border: 1px solid #8bba33;
    text-align: left;
    color: #ffffff;
    -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      -moz-background-clip: padding;
      -webkit-background-clip: padding-box;
      background-clip: padding-box; 

}*/