@font-face {
  font-family: "Proxima Nova";
  src: url("../CSS/Proxima_Nova_Fonts/ProximaNova-Regular.otf")
    format("opentype");
  font-weight: normal;
  font-style: normal;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --colorOrange: #c55a11;
  --colorOrangeLight: #e88c4f;
  --colorBlue: #008afc;
  --colorWhite: #eeeeee;
  --colorBlack: #1c1c1c;
  --colorBlueLogo: #305699;
}

body {
  font-size: 100%;
  font-family: "Proxima Nova", "Times New Roman" !important;
  /* font-family: "Times New Roman"; */
  width: 100%;
  margin: auto !important;
  padding: 0;
  background: white;
}

button {
  cursor: pointer;
}

header {
  padding: 1em 0em;
}

header p {
  font-size: 1em;
  font-style: italic;
  text-align: center;
}

h1#AmortizeCREHeader {
  font-weight: bold;
  font-style: italic;
  text-align: center;
  margin: 0;
  font-size: 32px;
}

span#Amortize {
  color: #2f5597;
}

span#CRE {
  color: #44546a;
}

span.blue-color {
  color: #2f5597;
}

#header_text {
  margin: 0.5em 0;
}

/*Logo colors: #44546A and #2F5597*/
#logo_img {
  height: 55px;
}
nav#nav_bar {
  background: #2f5597;
  box-shadow: 0px 2px 4px;
}

nav#nav_bar ul {
  list-style: none;
  /*Use flexbox*/
  display: flex;
  /*Aligns <li> with equal space around in <ul>.*/
  justify-content: space-around;
}

nav#nav_bar ul li {
  display: flex;
  /*Align <a> items vertically within <li>*/
  align-items: center;
}

nav#nav_bar ul li a {
  font-size: 1.1em;
  height: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  text-decoration: none;
  color: white;
}

nav#nav_bar ul li:hover a {
  font-style: oblique;
}

img#home_img {
  margin: 0.25em 0em;
  width: 100%;
}

/*Text slideshow styles start */

h2#how-we-are-different {
  padding-top: 1em;
  text-align: center;
  margin-bottom: 0;
  font-size: 1.6rem;
  font-weight: bold;
}

.slideshow-container .carousel .slide {
  background-color: transparent;
}
.slideshow-container .carousel .carousel-status,
.slideshow-container .carousel .thumbs-wrapper {
  display: none;
}

.slideshow-container .mySlides {
  margin-bottom: 50px;
}

.slideshow-container .carousel.carousel-slider {
  box-shadow: none;
  padding: 20px 0;
}

.slideshow-container .carousel .control-dots {
  padding: 20px;
  margin: 0;
  background: #ddd;
}

.slideshow-container .carousel.carousel-slider .control-arrow {
  height: 60px;
  color: #000;
}

.slideshow-container .carousel .control-prev.control-arrow:before {
  border-right: 8px solid #000;
}

.slideshow-container .carousel .control-next.control-arrow:before {
  border-left: 8px solid #000;
}

.slideshow-container .carousel .control-dots .dot {
  width: 15px;
  height: 15px;
  opacity: 1;
  background-color: #bbb;
  outline: none;
}

.slideshow-container .carousel .control-dots .dot.selected,
.carousel .control-dots .dot:hover {
  background-color: #717171;
}

.mySlides h2 {
  margin-bottom: 1em;
  font-size: 1.3rem;
  font-weight: bold;
}

main section div {
  position: relative;
  text-align: center;
}

main section div ul#stage {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.75em;
  list-style: none;
  color: #44546a;
  padding: 10px;
}

#stage li:nth-of-type(1) {
  z-index: 20;
  animation-name: fader;
  animation-delay: 3s;
  animation-duration: 5s;
  animation-direction: alternate;
}

#stage li:nth-of-type(2) {
  z-index: 10;
}

#stage li:nth-of-type(n + 2) {
  display: none;
}

@keyframes fader {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/*Text slideshow styles end*/

main div#text_banner_container {
  /*Centers input button within DIV*/
  text-align: center;
}

/*This class is removed from request signup button onclick event*/
.text-banner:hover {
  box-shadow: 0px 1px 5px #c55a11;
  transform: translateY(-1px);
}

/*Selects all buttons (not including reset or submit*/
input[type="button"] {
  height: 3em;
  font-size: 2em;
  width: 100%;
  color: white;
  background-color: #c55a11;
  border: none;
  border-radius: 5px;
}

/*To select and style placeholder text, use input::placeholder. Will also need to look up appropriate code for Firefox and IE, which is different than Chrome.*/
input[type="submit"],
input[type="reset"] {
  height: 2em;
  width: 14em;
  color: white;
  background-color: #05dcac;
  border: none;
  border-radius: 5px;
  margin: 1em 0;
}

/*Override background style from above for reset button*/
input[type="reset"] {
  background-color: #2f5597;
}

input[type="reset"]:hover {
  box-shadow: 0px 1px 5px #2f5597;
  transform: translateY(-1px);
}

input[type="submit"]:hover {
  box-shadow: 0px 1px 5px #05dcac;
  transform: translateY(-1px);
}

#home_signup_form .terms,
.full-width-submit,
#home_signup_form input[type="text"],
#home_signup_form input[type="url"],
#home_signup_form input[type="email"],
#home_signup_form input[type="tel"] {
  height: 2em;
  width: 29em;
  border-radius: 5px;
  margin: 0.35em auto;
  /*Controls padding of placeholder and user entry text unless placeholder padding specified with ::placeholder elsewhere.*/
  padding-left: 3px;
  text-align: left;
  color: darkslategray;
}

textarea {
  height: 7em;
  width: 29em;
  display: block;
  border-radius: 5px;
  border-width: 2px;
  border-style: inset;
  border-color: gray;
  margin: 0.25em auto;
  padding-left: 3px;
  color: darkslategray;
}

textarea::placeholder {
  padding-top: 0.25em;
}

/*Display: None property changed by Javascript to block when user clicks the home_request_signup_button*/
form#home_signup_form {
  /* text-align: center; */
  /* display: none; */
  max-width: 29em;
  margin: 0 auto;
}

form#home_signup_form textarea {
  margin: 0.35em auto;
  padding-left: 3px;
}

form select#select_customer_type {
  height: 36px;
  /* width: 29em;*/
  width: 100%;
  border-radius: 5px;
  border-width: 2px;
  border-style: inset;
  /*border-color: gray;*/
  border-image: initial;
  margin: 0.25em 0;
  /*Controls color once dropdown option is selected.*/
  /*color: darkslategray;
  background: white;*/
  color: #90a1a1;
  background: white;
}

/*Styles Customer Type* option in dropdown (used as placeholder). The Customer Type* option's value attribute is deliberately set to ="", which allows for use of invalid pseudoclass to select it. The style below is applied to the option element while it's invalid.*/
form select#select_customer_type:required:invalid {
  color: gray;
}

/*Selects option with value attribute ="" and disable attribute on. As mentioned above, the Customer Type* option is disabled so a user can't change it and display: none so they cannot select that option. They will be forced to select another option, which will be a valid option that removes the style here and from paragraph above.*/
option[value=""][disabled] {
  display: none;
}

/*Controls color of options while dropdown menu is down.*/
/* form select#select_customer_type option {
  color: darkslategray;
} */

iframe[seamless] {
  display: block;
}

h1.section-header {
  text-align: center;
  color: #44546a;
}

#text_banner_container {
  margin-top: 24px;
}

/*Text carousel slides styling START*/
/* Slideshow container */
.slideshow-container {
  position: relative;
}

#interactive-demo {
  margin-bottom: 20px;
}
main {
  margin-bottom: 40px;
}

/* Slides */
.mySlides {
  /* display: none; */
  padding: 20px 40px 40px;
  text-align: center;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
}

/* The dot/bullet/indicator container */
.dot-container {
  text-align: center;
  padding: 20px;
  background: #ddd;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.menu-btn {
  background: none;
  box-shadow: none;
  border: none;
  outline: none;
  margin: 12px 0;
}
.menu-btn img {
  filter: invert(1);
}

/* Add a background color to the active dot/circle */
.active,
.dot:hover {
  background-color: #717171;
}

/* Add an italic font style to all quotes */
.slideshow-container p {
  font-style: italic;
}

.footer-menu#menubar {
  flex-direction: column;
}

.footer-menu#menubar li {
  justify-content: center;
}
.footer-menu#menubar li:hover a {
  font-style: normal !important;
}

.footer-menu#menubar li a {
  padding-top: 10px;
  padding-bottom: 0;
  font-size: 1em;
}
.footer-menu#menubar li a:hover {
  font-style: normal;
}

.footer-menu#menubar li:last-child a {
  padding-bottom: 10px;
}

/*Text carousel slides styling END*/

.cre-container {
  padding: 0 30px;
  max-width: 1570px;
  margin: 0 auto;
}

#user-guide {
  margin-bottom: 20px;
}

.user-guide p {
  margin-bottom: 10px;
}

.user-guide {
  padding-bottom: 0;
}

form#home_signup_form .terms label {
  margin: 0 5px;
}

#transition-modal-title {
  font-size: 1.4rem;
  font-weight: bold;
}

.privacy-data {
  padding-bottom: 40px;
  min-height: 62.5vh;
}

.reach-out-heading {
  margin-top: 30px;
  margin-bottom: 0px !important;
}

.terms-heading {
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 0;
}
.list-disc {
  list-style: disc;
  padding: 10px 0 10px 30px;
}

#home_signup_form .terms {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  height: auto;
}
#home_signup_form .terms input[type="checkbox"] {
  margin-top: 5px;
  margin-right: 10px;
}

.aboutContent p {
  margin-bottom: 10px;
}

.lastModified {
  width: 100%;
  color: #777;
  font-size: 18px;
  margin-bottom: 10px;
}

/*MEDIA QUERIES*/
@media only screen and (min-width: 768px) {
  body {
    width: 95% !important;
  }
  .menu-btn {
    display: none;
  }
  input[type="reset"] {
    margin-left: 16px;
  }
  .blink-image {
    display: none;
  }
}

@media (max-width: 767px) {
  nav#nav_bar ul {
    flex-direction: column;
    display: none;
  }
  #interactive-demo {
    margin-bottom: 40px;
  }
  nav#nav_bar ul.show {
    display: flex;
  }
  img#home_img {
    height: 200px;
  }
  input[type="button"] {
    font-size: 1em;
  }
  form select#select_customer_type,
  textarea,
  #home_signup_form .terms,
  #home_signup_form input[type="text"],
  #home_signup_form input[type="email"],
  #home_signup_form input[type="tel"] {
    width: 100%;
  }
  input[type="reset"] {
    margin-bottom: 20px;
    margin-top: 0;
  }
  form#home_signup_form {
    text-align: left;
  }
  input[type="submit"],
  input[type="reset"] {
    margin: 1em auto;
    display: block;
  }

  #home_signup_form .terms input[type="checkbox"] {
    width: 45px;
    height: 20px;
    display: inline-block;
  }
}

.text-banner {
  height: 2em;
  font-size: 2em;
  width: 100%;
  color: white;
  background-color: #c55a11;
  border: none;
  border-radius: 0px;
  text-align: center;
  padding-top: 10px;
  box-shadow: 0px 1px 5px #c55a11;
  transform: translateY(-1px);
}
.user-guide-center {
  text-align: center;
}
#icon-wrapper {
  display: none !important;
}
.powered-link {
  color: white;
}
.footerMenu {
  margin: 10px 0px 0px;
  font-size: 18px;
  color: #fff;
}
#home_signup_form input[name="link"] {
  text-transform: lowercase;
}
#home_signup_form input[name="link"]::placeholder {
  text-transform: none;
}
.container.calcContent {
  margin-top: 30px;
  text-align: left;
}
.msgContent a {
  color: white;
  background-color: #2f5597;
  border: none;
  border-radius: 5px;
  margin: 1em 0;
  padding: 10px;
  cursor: pointer;
  text-decoration: none !important;
}
.msgContent a:hover {
  box-shadow: 0px 1px 5px #2f5597;
  transform: translateY(-1px);
  color: white;
  background-color: #2f5597;
}
.column.is-12.msgContent {
  text-align: center;
}
@media (max-width: 400px) {
  .reg-banner {
    font-size: 24px;
    padding-bottom: 45px;
  }
}
.errormsg {
  color: red;
  font-size: 12px;
}
#interactive-demo {
  /* font-family: "Poppins", sans-serif; */
  font-family: Arial, Helvetica, sans-serif;
}
#home_signup_form iframe {
  height: 78px;
}
#home_signup_form span {
  font-size: 12px;
  color: red;
}
form select#select_customer_type {
  height: 2em;
  width: 100%;

  border-radius: 5px;
  border-width: 2px;
  border-style: inset;
  /* border-color: gray;*/
  border-image: initial;
  margin: 0.25em 0;
  /*color: darkslategray;*/
}

form select#select_customer_type:required:invalid {
  color: gray !important;
}

option[value=""][disabled] {
  display: none;
}

form select#select_customer_type option {
  color: darkslategray;
}
.gray {
  color: gray !important;
}
.darkslategray {
  color: darkslategray !important;
}

.amo-main .title {
  color: #000;
}

/* .amo-main .apexcharts-series path {
} */
.amo-main line {
  stroke: rgb(247 232 232);
}
.amo-main .calc-header {
  background-color: #003058;
}
.amo-main .calc-container {
  border-color: #003058;
}
.amo-main .rc-pagination-item-active {
  background-color: #003058;
  border-color: #003058;
  color: #fff;
}
.amo-main .rc-pagination-item:hover {
  border-color: #003058;
}

.amo-main .getrate,
.amo-jumbo-loan .getrate {
  display: block;
  color: #fff;
  padding: 3px 8px;
  font-size: 12px;
  border-radius: 5px;
  margin-bottom: 6px;
  cursor: pointer;
  margin-left: 0;
  font-size: 10px;
  width: 70px;
  text-align: center;
}

.amo-main .getrate {
  background-color: #003058;
}

.amo-jumbo-loan .getrate {
  background-color: #1271a7;
}

.getrate:hover {
  color: #fff;
  text-decoration: none;
}

.amo-main .getrate:hover {
  background-color: #008afc;
}

.amo-jumbo-loan .getrate:hover {
  background-color: #37435b;
}

span.jsx-2218752644 {
  font-size: 12px;
  margin-right: 3px;
}

.largocapital .amo-main .amo-jumbo-loan .rc-pagination-item-active {
  background-color: #181818;
  border-color: #181818;
}
.largocapital .amo-main .amo-jumbo-loan .calc-container {
  border: 1px solid #a88c49;
}

.daviddelatorre .amo-main .amo-jumbo-loan .rc-pagination-item-active {
  background-color: #c72108;
  border-color: #c72108;
}

.daviddelatorre .amo-main .amo-jumbo-loan .calc-container {
  border: 1px solid #c72108;
}

.directfinance .amo-main .amo-jumbo-loan .rc-pagination-item-active {
  background-color: #006d94;
  border-color: #006d94;
}

.directfinance .amo-main .amo-jumbo-loan .calc-container {
  border: 1px solid #006d94;
}
.primecommerciallending .amo-main .amo-jumbo-loan .rc-pagination-item-active {
  background-color: #444d72;
  border-color: #444d72;
}

.primecommerciallending .amo-main .amo-jumbo-loan .calc-container {
  border: 1px solid #444d72;
}

.crefcoafinance .amo-main .amo-jumbo-loan .rc-pagination-item-active {
  background-color: #2b353d;
  border-color: #2b353d;
}

.crefcoafinance .amo-main .amo-jumbo-loan .calc-container {
  border: 1px solid #f68126;
}

.crefcoafinance .amo-main .amo-jumbo-loan .rc-pagination-item-active {
  background-color: #f68126;
  border-color: #f68126;
}

.crefcoafinance .amo-main .amo-jumbo-loan .calc-container {
  border: 1px solid #2b353d;
}

.crefcoafinance .powered {
  color: #2b353d;
}
.crefcoafinance .powered a {
  color: #2b353d !important;
}

/* Css for Admin screens */

section.sectionContainer {
  width: 100%;
  min-height: 100vh;
  position: relative;
  top: 0;
  left: 0;
  padding-top: 2rem;
}
div.formContainer {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30rem;
  padding: 1rem;
  border-radius: 0.4rem;
  background-color: var(--colorBlueLogo);
}

div.formContainer h2 {
  color: var(--colorWhite);
  margin: 2rem 0;
  text-align: center;
  letter-spacing: 0.1rem;
}

div.registrationForm {
  position: relative;
  top: 0rem;
  left: 0;
  transform: translate(0, 0);
  width: 60%;
  margin: auto;
}

.input {
  display: block;
  width: 100%;
  padding: 1rem;
  margin-bottom: 1rem;
  border: none;
  outline: none;
}

div.formContainer button {
  width: 40%;
  padding: 1rem;
  border: none;
  outline: none;
  background-color: var(--colorBlue);
  color: white;
}

div.formcontainer button:hover {
  cursor: pointer;
  transform: translateY(-1px);
}

div.dataTable-container-wrapper h2 {
  color: var(--colorBlack);
  margin: 2rem 0;
  text-align: center;
  letter-spacing: 0.1rem;
}

.dataTable-container {
  padding-top: 1rem;
  width: 100%;
  overflow-x: scroll;
}

.dataTable-container h2 {
  color: var(--colorBlack);
  margin: 2rem 0;
  text-align: center;
}

.dataTable-container table {
  width: 100%;
}

.dataTable-container table,
.dataTable-container tr {
  width: 100%;
}

.dataTable-container tr,
.dataTable-container th,
.dataTable-container td {
  width: fit-content;
}

.dataTable-container table,
.dataTable-container th,
.dataTable-container tr,
.dataTable-container td {
  border: 1px solid var(--colorBlack);
  border-collapse: collapse;
}

.dataTable-container table tr td,
.dataTable-container table tr th {
  text-align: center;
  padding: 0.2rem;
}

.dataTable-container th {
  background-color: var(--colorBlueLogo);
  color: var(--colorWhite);
}

/* Customer section */

div.formContainer .site-logo {
  display: block;
  margin: auto;
}

.loginSection .formContainer {
  background-color: var(--colorBlueLogo);
}

.redirectSection .formContainer {
  background-color: var(--colorBlueLogo);
}

.section-text {
  color: var(--colorBlack);
  padding: 0.5rem 0;
  text-align: center;
  font-weight: bolder;
}

div.formContainer .section-text a {
  color: var(--colorBlue);
}

button.user-login {
  display: block;
  width: 100%;
  padding: 1rem;
  margin-bottom: 1rem;
  border: none;
  outline: none;
  font-weight: normal;
}

div.loadingModal {
  position: absolute;
  width: 100%;
  height: 100vh;
  background-color: #44546a;
  z-index: 99;
  top: 0;
  left: 0;
}

div.loadingModal .outerDiv {
  width: 4rem;
  height: 4rem;
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);
}

div.loadingModal .innerDiv {
  width: 4rem;
  height: 4rem;
  border: 0.5rem solid var(--colorWhite);
  border-left-color: var(--colorBlue);
  border-radius: 50%;
  animation: spinner 1s linear infinite;
}

@keyframes spinner {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}

/* Data table styles */

.edit-button {
  display: block;
  padding: 1rem;
  border: none;
  outline: none;
  background-color: var(--colorBlue);
  color: white;
  width: 100%;
}

.regenerate-button {
  background-color: #00ff55;
  width: 100%;
}

.delete-button {
  display: block;
  padding: 1rem;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  width: 100%;
}

.form-input-flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: var(--colorWhite);
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.input-fields {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  width: 15%;
  margin-left: 1rem;
}

/* Responsiveness */

@media (max-width: 500px) {
  section.sectionContainer div.formContainer {
    width: 90%;
  }
}

/* Reviews */

.reviews-text-section {
  padding: 0 15px;
  margin-top: 30px;
}

.review {
  margin-bottom: 1rem;
}

.review-text,
.reviewer {
  text-align: justify;
}

.review-text {
  font-style: italic;
}

.reviewer {
  font-weight: bold;
  font-size: larger;
}

.amo-jumbo-loan .title {
  color: #000;
}

.amo-jumbo-loan line {
  stroke: rgb(247 232 232);
}
.amo-jumbo-loan .calc-header {
  background-color: #1271a7;
}
.amo-jumbo-loan .calc-container {
  border-color: #1271a7;
}
.amo-jumbo-loan .rc-pagination-item-active {
  background-color: #1271a7;
  border-color: #1271a7;
  color: #fff;
}
.amo-jumbo-loan .rc-pagination-item:hover {
  border-color: #1271a7;
}