.amount, .info, sup {
    font-weight: 500
}

.amount, .info, .invalid-request p {
    color: #043d46
}

body {
    font-family: Poppins,sans-serif;
    background: #fff0;
    overflow:hidden;
}

    body.dark-theme {
        background: #043d46
    }

.main {
    max-width: 500px;
    width: 100%;
    height: 100%
}

.chart-canvas {
    max-width: 210px
}

.details-amt {
    flex: 1;
    max-width: 220px
}

.calculator-btn .btn_1, .contact-button {
    background-color: #fec800;
    padding: 10px 20px;
    min-width: 150px;
    min-height: 45px;
    max-width: 100%
}

.details-amt img.img-fluid {
    max-height: 52px
}

.info {
    font-size: 12px;
    margin: 0
}

.amount {
    font-size: 16px;
    margin-bottom: 15px
}

sup {
    top: -10px;
    font-size: 10px
}

.contact-button {
    border: 1px solid #fec800;
    margin: 20px 0 0;
    border-radius: 4px;
    color: #092c1b;
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center
}

.graph {
    margin-bottom: 20px
}

.footer-info, .interest-details .amount, hr {
    color: #707070
}

.contact-button:active {
    box-shadow: none
}

.interest-details .info {
    margin-bottom: 5px;
    color: #707070
}

.footer-info {
    font-size: 12px;
    font-weight: 500;
}

.invalid-request {
    display: none;
    padding: 8px;
    text-align: center
}

body.dark-theme .amount, body.dark-theme .footer-info, body.dark-theme .info, body.dark-theme .invalid-request p, body.dark-theme hr {
    color: #e5e2e2
}

.below-37-logo, .help-section, .interest-details.below-370-details {
    display: none
}

.form-control::placeholder {
    opacity: 1;
    color: #ccc;
    font-weight: 400;
    font-size: 16px
}

.help-section p, p {
    color: #151515
}

.calculator-section .btn_1 {
    background-color: #fec800;
    border: 1px solid #fec800;
    margin: 20px 0 0
}

.widget-btn {
    flex-direction: column
}

    .widget-btn .contact-button {
        margin-top: 15px;
        width: 100%
    }

.form-control {
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 10px;
    width: 100%;
    height: 50px;
    font-size: 18px;
    display: block;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out
}

.calculator-btn .btn_1 {
    border: 1px solid #fec800;
    color: #092c1b;
    cursor: pointer;
    border-radius: 4px
}

.interest-details {
    display: flex;
    justify-content: space-between;
    align-items: center
}

@media (max-width:369px) {
    .amount, .below-37-logo, .info {
        text-align: center
    }

    .chart-canvas {
        display: flex;
        justify-content: space-between
    }

    .above-370, .interest-details {
        display: none
    }

    .amount, .below-370 {
        display: block
    }

    .interest-details.below-370-details {
        flex-direction: column;
        display: flex;
        justify-content: flex-start
    }

    canvas#calculator_chart {
        min-width: 200px;
        max-width: 200px;
        max-height: 180px
    }

    .graph {
        flex-direction: column;
        margin-bottom: 5px
    }

    .amount {
        margin: 0 0 5px;
        font-size: 18px
    }

    .info {
        margin: 10px 0
    }

    .below-37-logo {
        margin: auto;
        display: block
    }

        .below-37-logo img {
            max-width: 200px;
            max-height: 45px;
            margin-bottom: 5px
        }

    .chart-canvas, .details-amt {
        max-width: 100%
    }

    .widget-btn {
        flex-direction: row;
        justify-content: space-between
    }

        .widget-btn .contact-button {
            margin: 0;
            width: fit-content;
            padding: 6px 20px;
            min-height: auto;
            font-size: 14px
        }

    sup {
        top: -6px
    }
}

input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

.form-control:focus {
    border-color: #ccc;
    box-shadow: none
}

div:where(.swal2-container).swal2-backdrop-show, div:where(.swal2-container).swal2-noanimation {
    background: 0 0 !important
}

div:where(.swal2-icon).swal2-success .swal2-success-ring {
    border: .25em solid #7ac142 !important;
    background: #7ac142 !important
}

div:where(.swal2-icon).swal2-success [class^=swal2-success-line] {
    background-color: #fff !important;
    z-index: 111 !important
}

div:where(.swal2-container) {
    display: flex !important;
    position: absolute !important;
    height: 100% !important;
    width: 100%;
    margin: auto
}