@font-face {
    font-family: "myFirstFont";
    src: url("../fonts/CircularStd-Book.woff2");
}
/* Global Styles */
h1,h2,h3,h4,h5,h6,p{margin:0;padding:0;}
ul{padding:0;margin:0;}
a{ text-decoration: none;}
a:focus{outline:none !important;}
html,body {height: 100%;width: 100%;background-color:#fff;overflow-x: hidden;font-family: 'CircularStd-Book',Arial,sans-serif;font-size: 1em;line-height: 1.75;}

.calculator{ padding: 50px 0;}
.calculator h2{font-family: "DM Serif Display",Garimond,serif!important;
    font-size: 2.25rem!important;
    font-style: normal!important;
    font-weight: 400!important;
    letter-spacing: 0!important;
    line-height: 1!important;}
.FormLabel {
    color: #151515;
    display: block;
    font-size: .875rem;
    font-style: normal;
    margin-bottom: 0px;
    font-weight: bold;
    letter-spacing: .0125rem;
}
.FormInput {
    background-color: #fff;
    border: 0.0625rem solid #515260;
    border-radius: 4px;
    color: #151515;
    display: block;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    height: 3rem;
    padding: 0.5rem 1rem;
    width: 100%;
}
.calculator .form-control:focus {
    background-color: #e5eeff;
    border-color: #0157ff;
    border-width: 2px;
    outline: none;
    padding: 0.4375rem 0.9375rem;
    box-shadow: none;
}
.FormInput:active, .FormInput:focus {
    background-color: #e5eeff;
    border-color: #0157ff;
    border-width: 2px;
    outline: none;
    padding: 0.4375rem 0.9375rem;
}
.input_box{
    position: relative; display: block;
}
.input_box.LeftIcon .FormInput {
    padding-left: 1.8625rem;
}
.input_box.LeftIcon:before {
    content:"$";
    bottom: 0.675em;
    color: #151515;
    font-size: 1rem;
    left: 1rem;
    line-height: 1.75;
    position: absolute;
}
.input_box.RightIcon .FormInput {
    padding-right: 1.8625rem;
}
.input_box.RightIcon:before {
    content:"%";
    bottom: 0.675em;
    color: #151515;
    font-size: 1rem;
    right: 1rem;
    line-height: 1.75;
    position: absolute;
}
.calculator .form-control-lg{ border-radius: 4px;}
.downLeft{ border-radius: 4px 0px 0px 4px !important;}
.downRight{ border-radius: 0px 4px 4px 0px !important; margin-left: -1px;}
.FormSelect {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    border: 0.0625rem solid #515260;
    border-radius: 4px;
    cursor: pointer;
    display: block;
    font-size: 1rem;
    min-height: 3rem;
    padding: 0.25rem 0.8375rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 100%;
}
.FormSelect-arrow {
    fill: #0157ff;
    top: 0.5rem;
    color: #0157ff;
    pointer-events: none;
    position: absolute;
    right: 1.5rem;
}
.type-body-one {
    font-size: 1rem!important;
    font-style: normal!important;
    font-weight: 400!important;
    letter-spacing: -.0125rem!important;
    line-height: 1.75!important;
}
.Table tbody {
    color: #515260;
}
.Table td:first-child, .Table th:first-child {
    text-align: left;
}
.Table--borderedRows td, .Table--borderedRows th {
    border-bottom: 1px solid #b1b7c5;
}
.Table td {
    font-size: 1rem;
}
.Table td, .Table th {
    padding: 1rem;
}
.h-full {
    height: 100%!important;
}
.-mt-1 {
    margin-top: -0.25rem!important;
}
.rounded-full {
    border-radius: 9999px!important;
}
.Icon {
    color: inherit;
    display: inline-block;
    height: 2rem;
    position: relative;
    vertical-align: middle;
    width: 2rem;
}
.Icon--xs {
    height: 1rem;
    width: 1rem;
}
.rightInputBox{ width: 32%;}
.type-body-two{
    color: #0157ff;
    line-height: 1.5;
    font-size: 1rem;
    cursor: pointer;
    width: 100%;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.75;
    padding: 2px 2px;
    width: 100%;
}
.left_cont{ display: none;}
.Amortization-chart{ position: absolute; top: 43%; left: 0; width: 100%; z-index: 9;}
.leading-5 {
    line-height: 1.25rem!important;
}
.Numeral {
    display: inline-block;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: -.015625rem;
    line-height: 1.16;
    white-space: nowrap;
}
.Numeral-accent {
    font-size: 50%;
    position: relative;
    top: -0.5em;
    vertical-align: middle;
}
.Tooltip{ position: absolute; right: 0; top: -3px;}
.Tooltip svg{ color: #0157ff!important; fill: #0157ff!important; cursor: pointer;}
.tooltips .tooltiptext {
    visibility: hidden;
    width: 18.75rem;
    padding: 1rem;
    background-color: #fff;
    box-shadow: 0 0 1px 0 hsl(0deg 0% 8% / 10%), 0 2px 8px -1px hsl(0deg 0% 8% / 20%);
    color: #000;
    border-radius: 4px 4px 0 4px;
    position: absolute;
    z-index: 1;
    bottom:calc(100% + .3rem);
    right: 0%;
    margin-left: -60px;
    font-size: .75rem!important;
    letter-spacing: .01875rem!important;
    line-height: 1.75!important;
}
.tooltips .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    right: 0;
    margin-left: -9px;
    border-width: 9px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}
.tooltips:hover .tooltiptext {
    visibility: visible;
}
#doughnut-chart{ z-index: 99; position: relative;}

/* Responsive Styles */
@media (min-width: 768px) and (max-width: 991px) {

}
@media (max-width: 767px) {

}