@font-face {
  font-family: 'GT-ultra';
  src: url('../fonts/GT-Ultra-Fine-Bold.ttf') format('ttf'); /* Specify the path to your font file */
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'GT-ultra-standard';
  src: url('../fonts/GT-Ultra-Standard-Bold.ttf') format('ttf'); /* Specify the path to your font file */
  font-weight: bold;
  font-style: normal;
}
body {
  font-family: "Inter", sans-serif;
}
.container {
  padding: 2rem;
}
.inner-container {
  margin-right: auto;
  margin-left: auto;
  max-width: 90rem;
  padding: 1rem;
  background-color: #f8f1e6;
}
.expert-container{
  margin-right: auto;
  margin-left: auto;
  max-width: 92rem;
  background: linear-gradient(to bottom, #F8F1F7, #F9F3E8);
  border-radius: 10px;
  margin-bottom: 10px;
}
.expert-main-title{
  font-size: 24px;
  font-weight: bold;
  margin-top: 20px;
  font-family: "GT-ultra-standard";
}
.expert-inner-container{
  padding: 1rem;
}
.expert-read-more-link{
  color: #A904E8;
  cursor: pointer;
}
.expert-read-more-icon{
  display: inline-block;
  margin-top: 20px;
  cursor: pointer;
  transition: transform 0.3s;
}

.expert-box-hr{
  background-color:#E5DFDB; 
  border: none; 
  height: 0.5px;
  margin-top:15px;
  display: none;
}
.expert-box{
  margin-top: 20px;
  padding: 1rem;
}
.expert-slider{
  display: flex;
  gap: 20px;
}
.expert-box .expert-image{
  height: 150px;
  width: 150px;
  border-radius: 25px;
}
.expert-box .expert-comment{
  font-size: 16px;
  min-height: 106px;
  margin-right: 50px;
}
.expert-box .expert-name{
  font-weight: bold;
  margin-top: 20px;
}
.expert-slider{
  margin-bottom: 20px;
}
.slick-next {
  right: 20px !important;
}
.slick-next:before{
  color: black !important;
} 
.slick-dots li button:before{
  font-size: 12px !important;
}
.styled-text{
  color: #A904E8;
}

.demo-container {
  height: 100vh;
}

iframe {
  width: 100%;
  height: 100%;
}
.main-column {
  display: flex;
  flex-direction: row;
  padding: 2rem;
  column-gap: 2rem;
}

.main-column .input-fields-box {
  background-color: #ffffff;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 16%), 0 0 0 1px rgb(0 0 0 / 8%);
  border-radius: 0.5rem;
}

.main-column .input-main-box {
  width: 40%;
}

.main-column .input-fields-box .input-inner {
  padding: 2rem;
}
.main-column .input-fields-box .input-optional-inner {
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 2rem;
}

.textbox-container {
  padding-bottom: 1.5rem;
}
.optional-textbox-section{
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
  max-height: 1000px;
  overflow: visible;
}
.hidden {
 max-height: 0px;
 transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
 overflow: hidden;
}

.textbox-container .label {
  padding-bottom: 0.7rem;
  display: flex;
  flex-direction: row;
}
.textbox-container .optional-section {
  display: flex;
  flex-direction: row;
}
.optional-box {
  margin-bottom: 1.5rem;
  cursor: pointer;
}

.formula-content {
  color: #000000;
  display: flex;
  align-items: center;
  column-gap: 5px;
  padding-bottom: 10px;
}
.formula-tag {
  background-color: #ffd400;
  border-radius: 50%;
  font-weight: 700;
  text-align: center;
  width: 30px;
  height: 30px;
  line-height: 30px;
}
.formula-sign {
  color: #ffffff;
  font-size: 20px;
}
.formula-sign.formula-sign-star {
  padding-top: 9px;
}
.toolitip-container {
  padding: 10px;
}
.toolitip-container a{
  color: #ffffff;
  font-weight: bold;
}
.textbox-container .label .label-text {
  padding-left: 5px;
  line-height: 20px;
  font-size: 16px;
  padding-top: 6px;
  width: 75%;
}

.textbox-container .label .label-text-detail {
  font-size: 14px;
  line-height: 1rem;
  color: #808080;
}

.option-section-title {
  font-weight: 600;
}
.arrow-container{
  display: flex;
  justify-content: space-between;
}

.insight-arrow-container{
  display: flex;
  justify-content: space-between;
}

.internal-arrow-container{
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.svg-icon{
  cursor: pointer;
}

.svg-icon.rotate{
  transform: rotate(180deg);
}

.option-section-detail {
  font-size: 12px;
  line-height: 1rem;
  color: #808080;
}

.detail-text {
  color: #6e7e7e;
  font-size: 16px;
  margin-top: 5px;
}

.information-icon{
    font-size: 12px; color: #6e7e7e; font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.information-icon.investment-info{
  align-self: center;
  margin-left:5px;
  margin-right: -16px;
}

.information-icon.orgnostic-cost-info{
    margin-left: 5px;
    margin-right: -16px;
    margin-top: 3px;
}

.textbox-container .label .label-text .label-hover {
  color: #7f2ccb;
  text-decoration: underline;
  text-decoration-style: dashed;
}

.textbox-container .textbox {
  width: 90%;
  padding: 0.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0.5rem;
  border-color: #acc3c3;
  border-style: solid;
  border-width: 1px;
  height: 35px;
  font-size: 18px;
}
.textbox-container .placeholder {
  position: relative;
}
.textbox-container .placeholder::after {
  position: absolute;
  right: 35px;
  top: 15px;
  content: attr(data-placeholder);
  pointer-events: none;
  opacity: 0.3;
  font-size: 18px;
}
.calculation-box {
  display: flex;
  flex-direction: column;
  font-size: 22px;
  row-gap: 1rem;
  padding-left: 50px;
  width: 60%;
}

.calculator-image{
  margin-left: -42px;
  margin-right: 16px;
}

.calculation-box .highlighted-text {
  font-size: 28px;
  color: #7f2ccb;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-position: under;
  font-weight: 700;
}

.calculation-box .day-process-text {
  font-size: 53px;
  color: #7f2ccb;
  font-weight: 700;
  text-underline-position: under;
  text-decoration: underline;
  text-decoration-style: dotted;
}
.underline-gap {
  text-decoration: underline;
  text-decoration-style: dotted;
  color: #7f2ccb;
  font-weight: 700;
  text-underline-position: under;
}
.rangeslider {
  position: absolute;
  bottom: -11px;
  width: 94%;
  left: 4px;
}
.__range {
  margin: 30px 0 20px 0;
  -webkit-appearance: none;
  background-color: transparent;
  height: 5px;
  width: 100%;
  margin: 10px auto;
  border-radius: 0.5rem;
}
.__range:focus {
  outline: none;
}
.__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  background: #ffd400;
  border-radius: 50%;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.textbox-top {
  position: relative;
}

/* 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;
}

.sentiment-box {
  float: right;
  position: relative;
}
.sentiment-image {
  position: absolute;
  bottom: -10px;
  right: 150px;
  height: 200px;
}
.error-message {
  color: #ff0000;
  font-size: 12px;
  display: none;
}

.calculation-box .chart-section {
  height: 500px;
  background-color: #ffffff;
  width: 100%;
}

.calculation-box .formula-section {
  margin-bottom: 30px;
}

.formula-section .formula-inner {
  padding-left: 20px;
  padding-right: 50px;
  padding-top: 30px;
  display: flex;
  justify-content: center;
}

.formula-equal {
  color: #000000;
  font-weight: normal;
}

.formula-inner .formula-text {
  font-size: 32px;
  color: #039900;
  align-self: center;
  padding-bottom: 10px;
}

.formula-inner .formula-content {
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  flex-direction: column;
}
.formula-inner .result-inner {
  display: flex;
  justify-content: space-between;
  width: 90%;
  font-size: 24px;
}

.orgnostic-result {
  color: #039900;
  text-decoration: underline;
  font-weight: bold;
  text-underline-position: under;
}

.formula-content .formula-tag-blue {
  background: rgba(68, 10, 136, 1);
  background: linear-gradient(to right, rgba(68, 10, 136, 1) 0%, rgba(32, 135, 130, 1) 70%);
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 5px;
  
}
.invest-dividing-formula{
  display: flex;
  font-size: 32px;
  font-weight: bold;
}
.insight-final-amount{
  color: #440A88;
}

.automation-final-amount{
  color: #208782;
}

.investment-amount {
  font-size: 32px;
  color: #CB6107;
  font-weight: bold;
}

.print-button-container{
  width: 100%;  
  display: flex;
  justify-content: center; 
  margin-bottom: 20px;
}
.print-button{
  background-color: #440A88;
  color:#ffffff;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid #440A88;
  border-radius: 7px;
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
}

.formula-content .formula-tag-purple {
  background-color: rgba(203, 97, 7, 1);
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  margin-top: 5px;
}

.detail-result-box {
  margin-top: 30px;
  font-size: 18px;
}

.detail-result-box .detail-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  align-items: center;
}

.detail-result-box .detail-section .description {
  width: 65%;
  display: flex;
}

.detail-result-box .detail-section .data {
  width: 35%;
  text-align: right;
  color: #1977da;
  font-weight: bold;
}

.detail-result-box .detail-section .data.insight{
  color: #440A88;
}

.detail-result-box .detail-section .data.automation{
  color: #208782;
}

.detail-result-box .detail-section .data.orgnostic-data {
  color: #CB6107;
}

.final-amount-description{
  font-size: 16px;
  flex: 2; align-items: center; display: flex;
  text-align: center;
  margin-top: 25px;
  color: #039900;
}

.toggle-container {
  display: inline-block;
  cursor: pointer;
  user-select: none;
  position: relative;
  width: 60px;
  height: 30px;
  background-color: #ccc;
  border-radius: 15px;
  padding: 5px;
  box-sizing: border-box;
}

.toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: white;
  border-radius: 15px;
  transition: transform 0.3s, background-color 0.3s;
}



/* CSS for the text inside the toggle button */
.toggle-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.toggle-container.on{
  background-color: #4CAF50;
}
.toggle-container.on .toggle-text {
  left: -12px;
}
.toggle-container.off .toggle-text {
  left: 12px;
}
/* CSS for the "on" state */
.toggle-container.on .toggle-slider {
  transform: translateX(30px);
}

@media all and (max-width: 991px) {
  .main-column {
    flex-direction: column;
    padding-bottom: 80px;
  }
  .main-column .input-fields-box {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 30px;
  }
  .main-column .input-main-box{
    width: 100%;
  }
  .sentiment-image {
    height: 150px;
  }
  .calculation-box {
    width: auto;
    max-width: 560px;
    margin: 0 auto;
    padding-top: 30px;
    padding-left: 0px;
  }
  .calculation-box .chart-section{
    width: 500px;
    height: 580px;
    margin: 0 auto;
  }
  .formula-inner .result-inner{
    width: 90%;
  }
}

@media all and (max-width: 767px) {
  body {
    margin: 0;
  }
  .container {
    padding: 0;
  }
  .inner-container {
    padding: 0;
    max-width: 100%;
  }
  .main-column {
    padding: 10px 10px 160px 10px;
  }
  .sentiment-image {
    right: 20px;
    bottom: 10px;
    height: 150px;
  }
  .calculation-box {
    padding-top: 30px;
    padding-left: 1px;
  }
  .calculation-box .chart-section{
    max-width: 350px;
    height: 580px;
    margin: 0 auto;
  }
  .formula-inner .formula-text{
    font-size: 22px;
  }
  .saving-amount{
    font-size: 22px;
  }
  .investment-amount{
    font-size: 22px;
  }
  .formula-content .formula-tag-blue{
    font-size: 10px;
    padding: 6px;
  }
  .formula-content .formula-tag-purple{
    font-size: 10px;
    padding: 6px;
  }
  .formula-inner .result-inner{
    font-size: 20px;
    width: 100%;
  }
  .formula-section .formula-inner{
    padding-left: 0px;
    padding-right: 0px;
  }
  .textbox-container .placeholder::after {
    right: 20px;
  }
  .information-icon.orgnostic-cost-info {
    margin-right: -5px;
  }
  .information-icon.investment-info {
    margin-right: -5px;
  }
}
@media all and (width: 540px) {
  .textbox-container .placeholder::after {
    right: 32px;
  }
}

@media all and (max-width: 360px) {
  .calculation-box .chart-section{
    max-width: 330px;
  }
}

@media all and (max-width: 280px) {
  .calculation-box .chart-section{
    max-width: 250px;
  }
}
@media print {
  .new-page {
    page-break-before: always;
  }
  .body{
    font-size: 12px;
  }
  button {
    display:none;
  }
}