:root {
  --green: #00d482;
  --lighter-green: #00eb90;
  --darker-green: #01bb73;

  --blue: #4678b2; /* Blue from Client Portal */
  --lighter-blue: #76b0ee;
  --darker-blue: #4793ea;

  --modal-green: #67ac5b;
  --lighter-modal-green: #82b679;
  --darker-modal-green: #46863b;

  --yellow: #f6c344;
  --orange: #ff9300;

  --gray: #c9c9c9;
  --lighter-gray: #d7d7d7;
  --darker-gray: #b9b9b9;

  --text-light-gray: #d5d5d5;
  --text-dark-gray: #929292;
}

/* Hide arrows input field */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

body {
  color: #5E5E5E;
}

/* Margin */
.mt-n1 {
  margin-top: -0.25rem !important;
}
.mt-n2 {
  margin-top: -0.50rem !important;
}

.relative {
  position: relative;
}

.no-overlay {
  z-index: 5;
  position: relative;
  background: white;
}

/* Backgrounds */
.blue-bg {
  background-color: var(--darker-blue);
}
.grad-blue-bg {
  background: linear-gradient(
    90deg,
    var(--lighter-blue) 0%,
    var(--darker-blue) 55%
  );
}

/* Text Colors */
.text-green {
  color: var(--green);
}
.text-blue {
  color: var(--darker-blue);
}
.text-ligth-gray {
  color: var(--text-light-gray);
}
.text-dark-gray {
  color: var(--text-dark-gray);
}

/* Border Colors */
.border-black-30 {
  border-color: rgba(0,0,0,.3)!important;
}
.border-black-50 {
  border-color: rgba(0,0,0,.5)!important;
}

/* Buttons */
.btn,
.form-control,
.input-group {
  border-radius: 0 !important;
}

.input-label {
  position: absolute;
  z-index: 999;
  background: #fff;
  font-size: 10px;
  padding: 0 3px;
  margin-left: -3px;
  margin-top: -15px;
}

.btn:not([class*="btn-outline"]),
.btn:hover:not([class*="btn-outline"]),
.btn:focus:not([class*="btn-outline"]),
.btn:active:not([class*="btn-outline"]) {
  color: white;
}
.btn:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  box-shadow: none !important;
}
.btn-close:focus {
  box-shadow: none !important;
}

/* Blue Button */
.btn-blue:hover {
  background-color: var(--lighter-blue);
}
.btn-blue,
.btn-blue:focus {
  background-color: var(--darker-blue);
}
.btn-blue:active {
  background-color: var(--blue);
}
/* lighter Blue Button */
.btn-lighter-blue:hover {
  background-color: var(--lighter-blue);
}
.btn-lighter-blue,
.btn-lighter-blue:focus {
  background-color: var(--lighter-blue);
}
.btn-lighter-blue:active {
  background-color: var(--blue);
}
/* Green Button */
.btn-green:hover {
  background-color: var(--lighter-green);
}
.btn-green,
.btn-green:focus {
  background-color: var(--green);
}
.btn-green:active {
  background-color: var(--darker-green);
}
/* Gray Button */
.btn-gray:hover {
  background-color: var(--lighter-gray);
}
.btn-gray,
.btn-gray:focus {
  background-color: var(--darker-gray);
}
.btn-gray:active {
  background-color: var(--gray);
}
/* Outline Green Button */
.btn-outline-green:hover {
  color: white;
  background-color: var(--green);
}
.btn-outline-green,
.btn-outline-green:focus {
  color: #018752;
  border-color: var(--green);
  background-color: rgb(0 212 130 / 20%);
}
.btn-outline-green:active {
  color: white;
  background-color: var(--darker-green);
}

.btn-shadow {
  box-shadow: 0 0 8px 0 rgb(0 0 0 / 33%);
}

.form-check-input:checked {
  background-color: #dc3545;
  border-color: #dc3545;
}

/* Border Color */
.border-green,
.border-green:focus {
  border-color: var(--green);
}

/* Border Radius */
.rounded-10 {
  border-radius: 1rem;
}

/* Top Navigation */
#top-nav .nav-link {
  color: var(--text-light-gray);
  cursor: pointer;
  font-family: "Helvetica Neue";
  font-size: 21px;
  font-weight: 200;
}

#top-nav .nav-link.active {
  color: #929292;
}

/* Client Card */
.company-name {
  font-family: "Helvetica Neue";
  font-weight: 200;
  font-size: 24px;
}
.name {
  font-family: "Helvetica Neue";
  font-weight: 200;
}

/* Contact */
.contact-container {
  min-width: 100px;
  margin: 0 4px;
}
.contact-container .contact-image {
  width: 64px;
  height: 64px;
  border: 2px solid #a9a9a9;
  padding: 2px;
}
.yellow.contact-image {
  border-color: var(--yellow) !important;
}
.yellow.contact-name {
  color: var(--yellow) !important;
}
.orange.contact-image {
  border-color: var(--orange) !important;
}
.orange.contact-name {
  color: var(--orange) !important;
}
.green.contact-image {
  border-color: var(--green) !important;
}
.green.contact-name {
  color: var(--green) !important;
}

.asterisk {
  color: #00d482;
}

/* Contact List */
.contact-list .contact-image {
  height: 32px;
  margin: 2px 4px 2px 0;
  border: 2px solid #a9a9a9;
  padding: 2px;
}
.contact-list .dropdown-item.active,
.contact-list .dropdown-item:active {
  color: #212529;
  background-color: #dadde0;
}

/* Congrats, total estimated benefit */

#congrats,
#estimated {
  font-family: "Helvetica Neue" !important;
  font-style: italic;
}

/* Contact Modal */
#addContactModal select:not(.selected) {
  color: grey;
}

/* Candidates View */
.fk-modal-background {
  z-index: 1;
  width: 1100px;
}
.fk-modal-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #eee;
  z-index: 2;
  opacity: 0.7;
}
.fk-modal-body {
  z-index: 3;
  margin-top: 100px;
  position: absolute;
  width: 700px;
  left: calc(50% - 350px);
}
.fk-modal-body .text-green {
  color: var(--modal-green);
}
.fk-modal-body .left-img {
  height: 200px;
}
@media screen and (max-width: 768px) {
  .fk-modal-body {
    width: calc(100% - 40px) !important;
    left: 20px !important;
  }
}
.fk-modal-body .btn-green:hover {
  background-color: var(--lighter-modal-green);
}
.fk-modal-body .btn-green,
.fk-modal-body .btn-green:focus {
  background-color: var(--modal-green);
}
.fk-modal-body .btn-green:active {
  background-color: var(--darker-modal-green);
}
#unlock {
  font-weight: 200 !important;
  text-align: right !important;
}

/* Transitions */
.ease-width {
  transition: width 1.1s ease;
}
.ease-height {
  transition: height 1.1s ease;
  overflow: hidden;
}
.ease-opacity {
  opacity: 0;
  transition: opacity 2s ease;
}

/* Dividers */
.hr-50 {
  width: 50%;
  height: 2px !important;
  color: var(--darker-blue);
  opacity: 1;
}

/* Wizard Item */
.wizard-item {
  transition: max-width 1.1s ease, opacity 1.1s ease;
  opacity: 1;
  max-width: 100%;
  position: relative;
}
.survey-question .input-group {
  width: 280px;
}
.survey-question .input-group .form-control {
  font-size: 13px;
  padding-top: 6px;
}
.property-info button:hover {
  background-color: var(--bs-danger);
  color: #fff;
}

/* Form */
.form-label {
  font-size: 0.875em;
  color: #6c757d;
  margin-bottom: 0.25rem;
}
.form-control:disabled, 
.form-control[readonly], 
.form-select:disabled, 
.disabled {
  background-color: #f6f8fb !important;
  opacity: .65 !important;
}

/* Content Editable */
[contenteditable="false"] {
  border: 1px solid transparent;
  padding: 1px 6px;
}
[contenteditable="true"] {
  border: 1px solid var(--lighter-gray);
  padding: 1px 6px;
}

.perspective-1 {
  perspective: 1000px;
}

/* Flip Card */
.flip-card-container {
  padding-bottom: 1.5rem;
  min-width: 285px;
}
@media screen and (min-width: 1600px) {
  .flip-card-container {
    width: 25%;
  }
}
/* .flip-card-container {
  min-width: 370px;
  max-width: 420px;
  padding-bottom: 1.5rem;
} */
.flip-card {
  position: relative;
  cursor: pointer;
  transition: transform 1s;
  transform-style: preserve-3d;
}
.flip-card.is-flipped {
  transform: rotateY(180deg);
}
.flip-card .card-face {
  background-color: white;
  width: 100%;
  height: 100%;
  min-height: 173px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transition: 1s ease-in-out;
  display: flex;
  border-radius: 0.7rem;
  border: 1px solid rgba(0,0,0,0.33);
  padding: 1rem;
}
.flip-card .card-face.back {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 0;
  transform: rotateY(0.5turn);
}
.flip-card .contact-container .contact-image {
  width: 100px;
  height: 100px;
  padding: 8px;
}
.flip-card .contact-container .contact-name {
  margin-top: -32px;
  font-size: 9px;
}
.flip-card .contact-container.active .contact-name {
  margin-top: 5px;
  font-size: 14px;
  font-style: italic;
}