/* ==========================================================================
   eVSM AI Powered Search — topic panel + suggested questions
   ========================================================================== */

:root {
  --evsm-orange: #e8821a;
  --evsm-orange-light: #fdf1e2;
  --evsm-purple: #7a2b8e;
  --evsm-text: #1f2430;
  --evsm-text-muted: #4a4f5c;
  --evsm-border: #e2e2e6;
  --evsm-bg: #f4f4f6;
}
#main-wrapper, #page {
  background: #fff!important;
}

#main-wrapper .content h1.title{
  display:none;
}
.container {
  max-width: 1100px;
  margin: 20px auto;
  padding: 14px !important;
  width: auto!important;
}

.container * {
  box-sizing: border-box;
}

/* ---- Header row / select all ---- */
.container .row > .col-md-12 > b {
  font-size: 16px;
  color: var(--evsm-text);
  font-weight: 700;
}

/* ---- Topic checkbox grid ---- */
.container > .row,
.container .row > .col-md-12,
.questions-main-div .row > .col-md-12 {
  flex: 0 0 100%;
  /*max-width: 100%;*/
}

.context-div {
  flex: 0 0 calc(25% - 13.5px);
  max-width: calc(23% - 13.px)!important;
  margin: 0;
  padding: 8px 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--evsm-text);
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--evsm-border);
  border-radius: 8px;
  transition: border-color 0.15s ease, background 0.15s ease;
  cursor: pointer;
  margin-bottom: 5px;
}

.context-div:hover {
  border-color: var(--evsm-orange);
  background: var(--evsm-orange-light);
}

.context-div:has(input[type="checkbox"]:checked) {
  border-color: var(--evsm-orange);
  background: var(--evsm-orange-light);
}

.context-div input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  accent-color: var(--evsm-orange);
  cursor: pointer;
}

/* "Select All" checkbox, styled to match the topic cards */
.selectall {
  width: 17px;
  height: 17px;
  accent-color: var(--evsm-orange);
  margin-right: 7px;
}

/* ---- Question label + textarea ---- */
.container .row.mt-4 .col-md-12:first-child,
.container .row.mt-4 > div:first-child {
  font-size: 15px;
  font-weight: 700;
  color: var(--evsm-text);
  margin-bottom: 8px;
}

#askquestion {
  display: block;
  width: 100% !important;
  max-width: 100%;
  border-radius: 29px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  margin: 0 auto;
  outline: none;
  resize: none;
}

#askquestion:focus {
  box-shadow: 0 0 0 4px rgba(232, 130, 26, 0.18);
}

.mt-4 {
  margin-top: 22px;
}

.mt-4 > .col-md-12 {
  text-align: left;
  margin-bottom: 10px;
}

/* ---- Buttons ---- */
input[type="submit"],
input[type="button"] {
  padding: 10px 24px;
  border-radius: 8px;
  border: 1px solid var(--evsm-border);
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-right: 10px;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

input[name="search"] {
  background: var(--evsm-orange-light);
  border-color: var(--evsm-orange);
  color: var(--evsm-orange);
}

input[name="search"]:hover {
  background: var(--evsm-orange);
  color: #fff;
}

input[name="clear"] {
  color: var(--evsm-text-muted);
}

input[name="clear"]:hover {
  background: #f2f2f4;
  border-color: #ccc;
}

/* ==========================================================================
   Suggested Questions
   ========================================================================== */

.questions-main-div {
  max-width: 1100px;
  background: #fff;
  /* border: 1px solid var(--evsm-border) !important; */
  border-radius: 10px !important;
  padding: 0px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.questions-main-div .col-md-12 > b {
  font-size: 17px;
  color: var(--evsm-text);
}

.question-row .row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px 0 0;
  justify-content: center;
  padding-right: 0px;
  padding-left: 0px;
}

.question-div {
  flex: 0 0 calc(50% - 6px);
  /*max-width: calc(45% - 6px)!important;*/
  margin: 0;
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--evsm-border);
  border-radius: 24px;
  transition: border-color 0.15s ease;
  cursor: pointer;
}

.question-div:hover {
  border-color: var(--evsm-orange);
}

.question-number.rounded-full {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eceef2;
  color: var(--evsm-text-muted);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.question {
  font-size: 14px;
  font-weight: 600;
  color: var(--evsm-text);
  line-height: 1.4;
}

/* ==========================================================================
   Responsive breakpoints
   ========================================================================== */

/* Tablet */
@media (max-width: 900px) {
  .context-div {
    flex: 0 0 calc(33.333% - 12px);
  }

  .question-div {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .container, .questions-main-div {
    margin: 10px 0px !important;
    padding: 12px 4px !important;
  }

  .context-div {
    flex: 0 0 calc(50% - 8px);
    font-size: 13px;
    padding: 10px 12px;
  }

  #askquestion {
    font-size: 13px;
  }

  input[type="submit"],
  input[type="button"] {
    width: 48%;
    margin-right: 4%;
  }

  input[type="button"] {
    margin-right: 0;
  }

  .question-div {
    border-radius: 12px;
    padding: 10px 12px;
  }

  .question {
    font-size: 13px;
  }

  .search-content .top-img-div {
    width: 100%
  }  
}

@media (max-width: 420px) {
	.context-div {
		flex: 0 0 100%;
		max-width: 100%;
	}

	input[type="submit"], input[type="button"] {
		width: 100%;
		margin-right: 0;
		margin-bottom: 8px;
	}

	#submit {
		width:100%;
		margin-bottom:10px;
	}

	.source-div1 {
		width:100%;
	}
	.feedback-div1 {
		width:100%;
		margin-left: 0px;
	}

}
@media (min-width: 768px) {
    .questions-main-div .col-md-6 {
        flex: 0 0 auto;
        width: 48%!important
    }
}

.highlighted {
	display:none;
} 


/* Container positioning helper (optional) */
.form-actions-container {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* Base style shared across both buttons */
.btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  font-weight: 500;
  border-radius: 12px;
  cursor: pointer;
  height: 44px;
  transition: all 0.2s ease-in-out;
  box-sizing: border-box;
}

/* ==========================================
   SEARCH BUTTON: ENABLED STATE
   ========================================== */
.btn-search {
  background-color: #e66e13; /* Primary Orange */
  color: #ffffff;
  border: none;
}

.btn-search:hover {
  background-color: #cb5d0a; /* Slightly darker orange on hover */
}

/* ==========================================
   SEARCH BUTTON: DISABLED STATE
   ========================================== */
.btn-search:disabled {
  background-color: #fef0e3; /* Soft Peach background */
  color: #7b8e9b;            /* Muted Grey-Blue text */
  cursor: not-allowed;       /* Changes cursor arrow */
}
.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #ffffff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
to { transform: rotate(360deg); }
}


/* ==========================================
   CLEAR BUTTON (Secondary Ghost Style)
   ========================================== */
.btn-clear {
  background-color: #ffffff;
  color: #003e72;            /* Deep Slate Blue text */
  border: 1px solid #d1d9e2; /* Light subtle grey-blue border */
}

.btn-clear:hover {
  background-color: #f7f9fb; /* Very soft grey on hover */
  border-color: #b9c7d5;
}

.result-div {
	border-radius: 5px;
    margin-bottom: 10px;
    padding: 12px 21px;
    font-size: 13px;
}
.opendoc {
	text-decoration: none;
    border: 1px solid lightgray;
    border-radius: 3px;
    padding: 5px;
    color: #000;
}

.opendoc:hover {
	text-decoration: none;
    border: 1px solid lightgray;
    border-radius: 3px;
    padding: 7px;
    color: #000;
    background: lab(98.2596% -.247031 -.706708);
}

.no-result-div {
	color: red;
    text-align: center;
    font-weight: bold;
    padding: 18px;
    font-size: 19px;
    border-radius: 5px;
    background: lab(96.5005% 4.18508 1.52328);
    border-color: red !important;
}

.feedback-div button {
	font-size: 11px;
	background: #fff;
}
.feedback-div button:hover {
	background: lab(98.2596% -.247031 -.706708);
}

.feedback-success-msg {
	color: lab(59.0978% -58.6621 41.2579);
}

.source-div {
	margin:0px 0px;
	padding: 0px 0px!important;
}

.source-div1 {
	align-items: center;
    line-height: 3;
    display: flex;
}
.feedback-div1, .feedback-div2 {
	float:left;
	margin-right: 20px;
}

.sendfdbk-div {
  display: none;
}
.sendfdbk-div .sendfdbk-inpt {
  float:left;
  margin-right:10px;
  width: 100%;
  margin-top: 10px;
}
.sendfdbk-div .sendfdbk-inpt textarea {
  width: 100%;    
}
  
.sendfdbk-div .sendfdbk-btn {
  float:left;

}

.ai-points {
  margin: 0px 25px;
  font-size: 18px;
  float:left;
  line-height: 51px;
  font-weight:600;
}
.ai-points2 {
  margin: 0px 25px;
  font-size: 18px;
  float:left;
  line-height: 51px;
  font-weight:600;
}
.ask-evsm {
  color: #ea700d; 
  font-size: 36px; 
  text-align:center;
  font-weight: bold;
}
.search-content .image img {
    max-width: 150px!important;
}

.search-content .row .sc-div {
  display:flex;
}
.search-content .top-img-div {
  float:left;
  margin-top: 24px;
}