@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
 
* {
    margin: 0;
    padding: 0;
    font-family: "Roboto", sans-serif;
    font-style: normal;
}
 
*,
::after,
::before {
    box-sizing: border-box;
}
 
body {
    height: 100vh;
    height: 100dvh;
    width: 100%;
}
 
.chat-position {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
 
/*** Chat Window ****/
 
.chat-window {
    border-radius: 16px;
    border: 1px solid var(--Grey-300, #E0E0E0);
    background: #FFF;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.15);
    height: 100%;
    width: 100%;
    overflow: auto;
 
}
 
.chat-form-header {
    display: flex;
    height: 56px;
    padding: 8px;
    align-items: center;
    gap: 12px;
    align-self: stretch;
}
 
.chat-form-footer {
    display: flex;
    padding: 16px 12px;
}
 
.footer-action {
    display: flex;
    flex: 1 1 auto;
}
 
.footer-action.left {
    justify-content: start;
}
 
.footer-action.right {
    justify-content: end;
}
 
.back-btn-lt {
    display: flex;
    justify-content: center;
    align-items: center;
}
 
 
.icon-btn {
    background: transparent;
    border: 0px;
    color: #757575;
    display: flex;
    padding: 5px;
 
}
 
.mia-avatar.small {
    height: 24px;
    width: auto;
    margin-left: -4px;
}
 
.form-title {
    overflow: hidden;
    color: var(--Text-Primary, #212121);
    text-overflow: ellipsis;
    font-size: 20px;
    font-weight: 500;
    line-height: 160%;
    /* 32px */
    letter-spacing: 0.15px;
}
 
.button {
    min-width: 100px;
    padding: 8px 16px;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
 
.button .right-icon {
    margin-right: -8px;
}
 
.button .left-icon {
    margin-left: -8px;
}
 
.button.primary-btn {
    color: #fff;
    background: #3276CF;
    border-color: transparent;
}
 
.button.teritary-btn {
    color: #3276CF;
    background: transparent;
    border-color: transparent;
}
 
.button.outline-btn {
    background-color: transparent;
    border: 1px solid #A2C1EA;
    color: #3276CF;
}
 
.chat-form-stepper {
    padding: 16px;
    display: flex;
    border-top: 1px solid var(--Grey-200, #EEE);
    border-bottom: 1px solid var(--Grey-200, #EEE);
    background: linear-gradient(90deg, var(--Primary-50, #DEE8F7) 0%, rgba(242, 245, 250, 0.00) 100%);
}
 
.stepper-step,
.vul-stepper-step {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
}
 
.step-count {
    height: 24px;
    width: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    background: #BDBDBD;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 166%;
    letter-spacing: 0.4px;
}
 
.step-name {
    color: #757575;
    font-size: 14px;
    font-weight: 400;
    line-height: 143%;
    letter-spacing: 0.17px;
}
 
.stepper-step.active .step-count,
.stepper-step.complete .step-count,
.vul-stepper-step.active .step-count,
.vul-stepper-step.complete .step-count {
    background: #3276CF;
}
 
.stepper-step.active .step-name,
.stepper-step.complete .step-name,
.vul-stepper-step.active .step-name,
.vul-stepper-step.complete .step-name {
    color: #212121;
    font-size: 14px;
    font-weight: 500;
    line-height: 157%;
    letter-spacing: 0.1px;
}
 
/**** chatform body *******/
 
.chat-form-body {
    height: calc(100% - 218px);
    padding: 16px 16px 16px 16px;
    overflow: auto;
}

.iva-chat-form-body{
    height: calc(100% - 150px);
    padding: 16px 16px 16px 16px;
    overflow: auto; 
}
 
.chat-body-form {
    height: calc(100% - 218px);
    padding: 16px 16px 16px 16px;
    overflow: auto;
    padding-left: 15px;
    padding-right: 15px;
}
 
.chat-body-form.ie-form{
    height: calc(100% - 150px);
    padding: 16px 16px 16px 16px;
    overflow: auto;
    padding-left: 15px;
    padding-right: 15px;
}
 
.input-field-lt {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}
 
.input-field-lt.column {
    flex-direction: column;
}
 
.input-field-lt.row {
    flex-direction: row;
}
 
.input-field-lt.row .input-label,
.input-field-lt.row .input-box,
.number-input-lt {
    /* width: 50%; */
}
 
.input-label {
    color: var(--Text-Primary, #212121);
    font-size: 14px;
    font-weight: 400;
    line-height: 143%;
    letter-spacing: 0.17px;
    margin-top: auto;
    margin-bottom: auto;
    width: 100%;
}
 
.input-box {
    height: 40px;
    width: 100%;
}
 
.input-box,
.textarea-box {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--Grey-400, #BDBDBD);
    background: var(--Default-White, #FFF);
}
 
.textarea-box {
    resize: vertical;
}
 
 
.input-box:focus,
.input-box:focus-visible,
.num-input-box:focus,
.num-input-box:focus-visible {
    border-width: 2px;
    border-color: #3276CF !important;
    outline: transparent;
}
 
.number-input-lt {
    height: 40px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    border: 1px solid var(--Grey-400, #BDBDBD);
    background: var(--Default-White, #FFF);
}
 
.num-input-box {
    text-align: center;
    border: 0px;
    width: 100%;
}
 
.form-section-heading {
    color: var(--Text-Primary, #212121);
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: 0.15px;
}
 
.form-subheading {
    color: #212121;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0.16px;
    margin-bottom: 16px;
}
 
.form-info-txt {
    color: var(--grey-600, #757575);
    font-size: 12px;
    font-weight: 400;
    line-height: 166%;
    letter-spacing: 0.4px;
}
 
.file-upload-lt {
    display: flex;
    padding: 24px 16px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    border: 1px dashed var(--Grey-400, #BDBDBD);
}
 
.file-type-info {
    color: #8E9092;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 143%;
    letter-spacing: 0.17px;
}
 
.uploaded-card {
    max-height: 74px;
    display: flex;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 12px 0px;
    border-radius: 8px;
    border: 1px solid #EEE;
}
 
.uploaded-file-name {
    width: 230px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
 
.uploaded-file-size {
    margin-top: 2px;
    color: #757575;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0.16px;
}
 
.chip-btn {
    color: var(--Text-Primary, #212121);
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 138.462%;
    letter-spacing: 0.16px;
    border-radius: 100px;
    border: 1px solid var(--Grey-400, #BDBDBD);
    padding: 7px;
    flex: 1 1 auto;
    background-color: transparent;
}
 
.chip-btn.active{
    background-color: #3276CF;
    color: #fff;
    border-color: #3276CF;
}
 
.form-error-message {
    display:none;
    color: red;
    font-size: 13px;
    margin-top: 4px;
}
 
.uploaded-media-icon img{
    width:32px;
    height:32px;
    object-fit:cover;
}
 
/* Spinner Load */
 
.custom-spinner,
.ie-custom-spinner,
.vul-custom-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-top: 2px solid #fff;
    border-radius: 50%;
    display: inline-block;
    animation: spin 0.6s linear infinite;
    margin-left: 6px;
}
 
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
 
/* Itel input */
.phone-input-box {
    width: 100%;
    height: 50px;
    border-radius: 10px;
    border: 1px solid #ccc;
    padding-left: 90px; /* space for flag */
    font-size: 16px;
}

.iti__flag-container {
    position: absolute;
}
 
.iti {
    width: 100%;
}
 
/* Currency symbol */
 
.currency-input{
    position: relative;
}
 
.currency-symbol{
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
}
 
.currency-input input{
    padding-left: 28px;
}
 
/* Income and Expenditure Form */
/*
.chat-body-form{
    padding-left: 15px;
    padding-right: 15px;
} */
 
.ie-section-wrapper {
    border-radius: 8px;
    border: 1px solid #E0E0E0;
    background: #FFF;
    margin: 15px 0px;
}
 
.ie-section-title {
    padding: 6px 16px;
    color: var(--Text-Primary, #212121);
    border-bottom: 1px solid var(--Grey-300, #E0E0E0);
 
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    /* 171.429% */
    letter-spacing: 0.17px;
}
 
.ie-input-field {
    padding: 0 12px;
    display: flex;
    flex-direction: column;
}
 
.input-box.amount {
    background-image: url('../svg/currency_pound_20dp.svg');
    background-repeat: no-repeat;
    background-position: 6px center;
    padding-left: 32px;
}
 
/* I & E input with remove button */
 
.input-with-remove{
    display:flex;
    align-items:center;
    gap:8px;
}
 
.input-with-remove .input-box{
    flex:1;
}
 
.icon-btn{
    border:none;
    background:transparent;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}
 
.icon-btn .material-symbols-outlined{
    font-size:22px;
}
 
/* Error message */
 
.field-error{
    width: 100%;
    color:#d4351c;
    font-size:13px;
    margin-top:4px;
}
 
#addVehicleBtn,
.add-other-expense-btn{
  font-size: 14px;
  font-weight: 500;
  color: #3276cf;
  background: transparent;
  border: none;
  font-family: "Roboto", sans-serif;
  line-height: 24px;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  cursor: pointer;
  text-transform: uppercase;
  white-space: nowrap;
}
 
.input-control {
    display: flex;
    flex-direction: column;
    width: 100%;
}


.complaint-form-error-message {
    display:none;
    color: red;
    font-size: 13px;
    margin-top: 4px;
}
.complaint-form-error-message.show {
    display: block;
}
#RaiseComplaintContainer {
  position: absolute;
  inset: 0;
}

.complaint-stepper-step {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
}

.complaint-stepper-step.active .step-count,
.complaint-stepper-step.complete .step-count {
    background: #3276CF;
}


.complaint-stepper-step.active .step-name,
.complaint-stepper-step.complete .step-name {
    color: #212121;
    font-size: 14px;
    font-weight: 500;
    line-height: 157%;
    letter-spacing: 0.1px;
}

.input-label .optional {
    color: gray;        /* makes the text gray */
    font-weight: normal; /* optional: make it lighter than the label */
    font-size: 0.9em;    /* optional: slightly smaller */
}


.form-section-header .section-title {
    margin-bottom: 15px; /* space between header and fields */
    font-size: 1.2em;
}

.form-row {
    display: flex;
    gap: 20px; /* space between columns */
    flex-wrap: wrap; /* makes it responsive on smaller screens */
}

.section-divider {
    margin-top: 40px;   /* space above the line if needed */
    margin-bottom: 20px; /* space below the line */
    border: none;       /* remove default border if you want a custom line */
    height: 1px;        /* line thickness */
    background-color: #ccc; /* line color */
}

.form-section-header {
    margin-bottom: 15px; /* space after the header before next content */
}

 
/* Itel input */
.complaint-phone-input-box {
    width: 100%;
    height: 50px;
    border-radius: 10px;
    border: 1px solid #ccc;
    padding-left: 90px; /* space for flag */
    font-size: 16px;
}
 
.complaintiti {
    width: 100%;
}

.dropdown-wrapper {
    flex: 1; /* makes both dropdowns equal width */
    display: flex;
    flex-direction: column;/* optional spacing between fields */
}

.custom-tooltip-message {
    display: none;
    background: #f5f5f5;
    color: #333;
    padding: 8px 10px;
    border: none;            /*  remove all borders */
    border-left: none;       /* extra safety */
    box-shadow: none;        /* remove shadow if any */
    border-radius: 4px;
    font-size: 12px;
    margin: 5px 0 10px 0;
}

.info-icon {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
}

.info-icon img {
    width: 14px;
    height: 14px;
    display: block;
}