body {
  font-family: "Roboto", sans-serif;
  background-color: #f8f7fa;
  display: flex;
	flex-direction: column;
  min-height: 100vh;
}
img {
  max-width: 100%;
}
header.survey-header {
  background: #fff;
  padding: 20px 0;
  box-shadow: 0 12px 10px rgb(0 0 0 / 3%);
}

.step-slider {
  margin: 0 0 0 auto;
}
.step-slider ol {
  margin: 0;
  padding: 0 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.step-slider ol span {
  display: none !important;
}
.step-slider ol li {
  position: relative;
  width: 35px;
  height: 35px;
  margin: 0 0 0 0;
  display: flex;
  border: solid 2px #eceef3;
  border-radius: 50px;
  align-items: center;
  justify-content: center;
  color: #dadee6;
  z-index: 9;
  background: #fff;
}
ol {
  list-style: none;
  counter-reset: my-awesome-counter;
}
.step-slider ol li {
  counter-increment: my-awesome-counter;
}
.step-slider ol li::before {
  content: counter(my-awesome-counter) "";
}
.step-slider ol li span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /*background: #9880ba;*/
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
}
.step-slider ol .progressbar {
  position: absolute;
  left: 0;
  right: 0;
  top: 16px;
  width: 100%;
  height: 2px;
  background: #eceef3;
  z-index: 8;
}
.step-slider ol .progressbar:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 0;
  /*background: #9880ba;*/
  transition: all 0.2s;
}
.select2-container--default .select2-selection--single {
  width: 100%;
  box-sizing: border-box;
}
.select2-dropdown {
  width: 250px !important; /* This should match the width of the parent div */
  box-sizing: border-box;
  word-wrap: break-word; /* Break long words to fit within the dropdown */
}
.select2-results__option {
  white-space: normal; /* Allow text wrapping within the dropdown options */
}
.step-slider ol li.complete {
  /*border-color: #9880ba;*/
}
.step-slider ol li.complete span {
  display: flex !important;
  transform: scale(1.05);
}

.General-Information {
 /* background: #dbd1e7;
  background: #dbd1e7;
  background: -moz-linear-gradient(
    180deg,
    rgba(219, 209, 231, 1) 0,
    rgba(237, 225, 239, 1) 100%
  );
  background: -webkit-linear-gradient(
    180deg,
    rgba(219, 209, 231, 1) 0,
    rgba(237, 225, 239, 1) 100%
  );
  background: linear-gradient(
    180deg,
    rgba(219, 209, 231, 1) 0,
    rgba(237, 225, 239, 1) 100%
  );*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#dbd1e7",endColorstr="#ede1ef",GradientType=1);
  padding: 10px 10px 0 25px;
  min-height: 200px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgb(0 0 0 / 5%);
  opacity: 0.3 !important;
  transition: all 0.3s;
}
#questionArea,
ul.nav.navbar.nav-pills {
  transition: all 0.3s;
}
.General-Information.scrollFade {
  opacity: 1 !important;
}
.gen-info {
  padding: 50px 0 0 0;
}
.info-graphic {
  margin: 7px 0 -18px 0;
  display: block;
}
.gen-info p {
  font-size: 14px;
  font-weight: 400;
  color: #000;
  line-height: 25px;
}
.General-Information .survey_panel-info em {
  font-size: 16px;
  text-transform: uppercase;
  color: #5b4083;
  font-weight: bold;
  display: block;
  margin-bottom: 3px;
  margin-top: -3px;
}
hr {
  opacity: 0.1;
  margin: 30px 0;
}
input[type="range"]::-moz-range-track {
  background-color: transparent;
}

/*** Main Sections css***/
.survey-page-heading {
  font-size: 20px;
  color: #010101;
  font-weight: 500;
  text-transform: uppercase;
}
#viewbrand {
  border: 1px solid;
  padding: 5px;
  margin-left: 2%;
  border-radius: 5px;
  /* display: none; */
  /* pointer-events: 'none', */
}
#viewbrand.disabled {
  opacity: 0.5; /* Make it look disabled */
  pointer-events: none; /* Prevent clicking */
  cursor: not-allowed; /* Show disabled cursor */
}
.breadcrumb-line ul.nav.navbar.nav-pills #PrintSurvey {
  box-shadow: none;
  border: solid 2px #c5b8d8;
  border-radius: 10px;
  padding: 7px 25px;
  /*color: #a18bc1 !important;*/
  font-size: 14px;
  background: #fff !important;
}
.breadcrumb-line ul.nav.navbar.nav-pills #CreatePdf {
  box-shadow: none;
  border: solid 2px transparent;
  border-radius: 10px;
  padding: 7px 25px;
  color: #fff !important;
  font-size: 14px;
  background: #a18bc1 !important;
  margin: 0 0 0 10px;
}
.breadcrumb-line ul.nav.navbar.nav-pills #PrintSurvey:hover {
  /*background: #a18bc1;*/
  color: #fff;
  /*border-color: #a18bc1;*/
}
.breadcrumb-line ul.nav.navbar.nav-pills #CreatePdf:hover {
  /*background: #8e77b1;*/
}
.questions-row .questions-ans-list ul.headings {
  padding: 0;
  list-style: none;
  margin: 30px 0 30px 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-weight: 700;
  text-align: center;
  line-height: 20px;
  font-size: 15px;
}
.questions-row .questions-ans-list ul.headings li {
  width: 15%;
}
.questions-row {
  background: #fff;
  margin: 18px 0 0 0;
  padding: 35px;
  box-shadow: 0 1px 13px rgb(0 0 0 / 4%);
  border-radius: 15px;
}
.questions-row .questions-ans-list ul.headings li:first-child {
  width: 25%;
}
.questions-ans-list .accord-qns form.accord-panel {
  width: 100%;
  max-width: 75%;
  margin: 0;
}
.questions-ans-list .accord-qns .accord-title {
  width: 25%;
  pointer-events: none;
}
.show-in-mobile {
  display: none;
}
.questions-title {
  font-size: 18px;
}
.questions-ans-list .accord-qns form.accord-panel {
  width: 100%;
  max-width: 75%;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.questions-ans-list .accord-qns form.accord-panel .form-check {
  width: 118px;
  height: 42px;
  position: relative;
  margin: 0 auto;
}
.questions-ans-list
  .accord-qns
  form.accord-panel
  .form-check
  input[type="radio"],
.second-qsn-options form.questions-panel .form-check input[type="radio"],
.third-qsn-options form.questions-panel .form-check input[type="radio"],
.progress_area .checkbox.checkbox-primary input[type="checkbox"] {
  margin: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
  border-radius: 0;
}
.questions-ans-list .accord-qns {
  display: flex;
  align-items: center;
  margin: 0 0 26px 0;
}
.questions-ans-list
  .accord-qns
  form.accord-panel
  .form-check
  label.form-check-label,
.second-qsn-options form.questions-panel .form-check label.form-check-label,
.progress_area .questionElm .radio-ques-box .radio.radio-primary label {
  border: solid 1px #e7e8ea;
  border-radius: 8px;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  overflow: hidden;
  transition: all 0s;
}
.questions-ans-list
  .accord-qns
  form.accord-panel
  .form-check:hover
  label.form-check-label,
.second-qsn-options
  form.questions-panel
  .form-check:hover
  label.form-check-label,
.progress_area .questionElm .radio-ques-box .radio.radio-primary:hover label {
  box-shadow: 0 0 13px rgb(217 134 238 / 20%);
  border-color: #ece0ef;
  background: none;
}
.questions-ans-list
  .accord-qns
  form.accord-panel
  .form-check
  label.form-check-label:after,
.second-qsn-options
  form.questions-panel
  .form-check
  label.form-check-label:after,
.progress_area .questionElm .radio-ques-box .radio.radio-primary label:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 10px rgb(217 134 238 / 20%);
  opacity: 0;
  margin: 0;
  border-radius: 0;
  margin: 0;
  border-radius: 0;
  display: block;
  transform: scale(1);
}
.questions-ans-list
  .accord-qns
  form.accord-panel
  .form-check:hover
  label.form-check-label:after,
.second-qsn-options
  form.questions-panel
  .form-check:hover
  label.form-check-label:after,
.progress_area
  .questionElm
  .radio-ques-box
  .radio.radio-primary:hover
  label:after {
  opacity: 1;
  background: none;
}
.questions-ans-list
  .accord-qns
  form.accord-panel
  .form-check
  label.form-check-label:before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background: #fff;
  border: solid 1px #cacaca;
  left: calc(50% - 11px);
  top: calc(50% - 11px);
  border-radius: 50px;
}
.questions-ans-list
  .accord-qns
  form.accord-panel
  .form-check:hover
  label.form-check-label::before {
  border: solid 1px ;/*#7a58a5;*/
  /*background: #c4b2d6;*/
}
.second-qsn-options
  form.questions-panel
  .form-check
  input[type="radio"]:checked
  + label.form-check-label,
.questions-ans-list
  .accord-qns
  form.accord-panel
  .form-check
  input[type="radio"]:checked
  + label.form-check-label,
.progress_area
  .questionElm
  .radio-ques-box
  .radio.radio-primary
  input[type="radio"]:checked
  + label {
  /*border-color: #c4b2d6;
  background: #ece0ef;*/
}

.second-qsn-options form.questions-panel {
  display: flex;
  align-items: center;
  margin: 30px 0 35px 0;
}
.second-qsn-options form.questions-panel .form-check {
  width: 150px;
  height: 48px;
  position: relative;
  margin: 0 20px 0 0;
}
.second-qsn-options form.questions-panel .form-check label.form-check-label {
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

.third-qsn-options form.questions-panel {
  display: flex;
  align-items: center;
  margin: 30px 0 15px 0;
}
.third-qsn-options form.questions-panel .form-check {
  width: 98px;
  height: 48px;
  position: relative;
  margin: 0 20px 0 0;
}
.progress_area .questionElm .radio-ques-box .radio.radio-primary label {
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}
.progress_area .questionElm .radio-ques-box .radio.radio-primary label i.fa {
  font-size: 18px;
  margin: 0 4px 0 0;
  /*color: #caccd1;*/
}
.third-qsn-options
  form.questions-panel
  .form-check
  input[type="radio"]:checked
  + label.form-check-label
  i.fa {
  /*color: #7754a3;*/
}
.progress_area
  .questionElm
  .radio-ques-box
  .radio.radio-primary:hover
  label.form-check-label
  i.fa {
  /*color: #7754a3;*/
}
.submit-actions {
  padding: 30px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.submit-actions .Save-and-Continue {
  /*background: #bcacd2;*/
  padding: 12px 30px !important;
  margin: 0 20px;
  border-radius: 9px;
  color: #fff;
  font-weight: 400;
  text-decoration: none;
  border: none !important;
}
.submit-actions .Save-and-Continue:hover {
  background: #8e77b1;
}

.Sandbox-qsn-options form.questions-panel {
  display: flex;
  align-items: center;
  margin: 30px 0 35px 0;
  flex-wrap: wrap;
}
.progress_area .checkbox.checkbox-primary {
  width: 100%;
  height: 48px;
  position: relative;
  margin: 0 20px 20px 0;
  padding: 0;
}

.progress_area .checkbox.checkbox-primary label {
  transition: all 0.5s;
  border: solid 1px #e7e8ea;
  border-radius: 8px;
  position: absolute;
  width: 100%;
  min-height: 48px;
  left: 0;
  overflow: hidden;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  padding: 0 40px !important;
  margin: 0 !important;
  text-align: center;
}
.progress_area .checkbox.checkbox-primary label:after {
  content: "" !important;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 13px rgb(217 134 238 / 20%);
  opacity: 0;
  margin: 0;
}
.progress_area .checkbox.checkbox-primary:hover label:after {
  opacity: 1;
}
.progress_area .checkbox.checkbox-primary:hover label {
  box-shadow: 0 0 10px rgb(217 134 238 / 20%);
  /*border-color: #ece0ef;*/
}
.progress_area
  .checkbox.checkbox-primary
  input[type="checkbox"]:checked
  + label {
  /* border-color: #c4b2d6;
  background: #ece0ef; */
}
.progress_area .checkbox.checkbox-primary label:before {
  padding-top: 0px;
  content: "";
  width: 22px;
  height: 22px;
  border: solid 1px #9ca0a8;
  border-radius: 4px;
  position: absolute;
  left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  line-height: 5px;
  margin: 0;
  top: calc(40% - 6px);
  outline: none !important;
}
.progress_area
  .checkbox.checkbox-primary
  input[type="checkbox"]:checked
  + label::before {
  content: url("../images/check-tick.png");
  background: #fff;
  /*border: solid 1px #9ca0a8;*/
}

.questions-title span {
  font-style: italic;
  color: #ccc;
}
.range-slider {
  width: 100%;
  margin: 20px 0 0 0%;
  padding: 0 0px;
}
.range-slider__range {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #eeeeee;
  outline: 0;
  padding: 0;
  margin: 0;
  border: solid 1px #caccd1;
}
.range-slider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #c4b2d6;
  cursor: pointer;
  -webkit-transition: background 0.15s ease-in-out;
  transition: background 0.15s ease-in-out;
}

.range-slider__range::-webkit-slider-thumb:hover {
  background: #ac93c5;
}
.range-slider__range:active::-webkit-slider-thumb {
  background: #ac93c5;
}

.range-slider__range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: #c4b2d6;
  cursor: pointer;
  -moz-transition: background 0.15s ease-in-out;
  transition: background 0.15s ease-in-out;
}
.range-slider__range::-moz-range-thumb:hover {
  background: #ac93c5;
}
.range-slider__range::-moz-range-thumb:active {
  background: #ac93c5;
}
.range-slider__value {
  display: none;
}
.range-slider__value:after {
  position: absolute;
  top: 8px;
  left: -7px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-right: 7px solid #c4b2d6;
  border-bottom: 7px solid transparent;
  content: "";
}
::-moz-range-track {
  background: #d7dcdf;
  border: 0;
}
input::-moz-focus-inner,
input::-moz-focus-outer {
  border: 0;
}
.range-slider .slider-ruler ul {
  padding: 0 0 0 7px;
  margin: 0;
  display: flex;
  list-style: none;
  justify-content: space-between;
}
.range-slider .slider-ruler ul li:after {
  content: "";
  display: block;
  text-align: center;
  line-height: 13px;
  width: 1px;
  height: 7px;
  background: #7f7f7f;
  margin: -2px auto 4px;
}
.range-slider .slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  margin: 11px 0 0 0;
}
.range-slider .slider-ruler ul li.active {
  font-size: 20px;
  color: red;
}
.range-slider .slider-ruler ul li h5 {
  font-weight: 400;
  color: #3a3a3a;
}
.range-slider .slider-ruler ul li.active h5 {
  font-weight: 700;
  color: black;
  cursor: pointer;
  font-size: 22px;
}
.range-slider .slider-ruler ul li.active::after {
  height: 11px;
  margin: -6px auto 6px;
}
.textarea-progress {
  margin: 0 0 30px 0;
}

.textarea-progress textarea#text {
  height: 175px;
  box-shadow: none;
  border: solid 1px #edeef0;
  padding: 10px;
  font-size: 16px;
}
.textarea-progress .progressbar-wrap {
  float: right;
  width: 100%;
  max-width: 415px;
  margin: -30px 0 8px 0px;
}
.textarea-progress .progressbar-wrap .progressbar-back {
  width: 100%;
  height: 6px;
  background: #a4a2a6;
  border-radius: 50px;
  overflow: hidden;
  position: relative;
}
.textarea-progress .progressbar-wrap .text-numbers-status {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  align-items: center;
}
.textarea-progress
  .progressbar-wrap
  .text-numbers-status
  .right-status-and-icon {
  width: auto !important;
  display: flex; /*margin-right: 28px;*/
  align-items: center;
  margin-bottom: 5px;
  min-height: 25px;
}
.textarea-progress
  .progressbar-wrap
  .text-numbers-status
  .right-status-and-icon
  img {
  max-width: 25px;
  margin-left: 10px;
}
.textarea-progress .progressbar-wrap .progressbar-back .progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  transition: all 0.4s;
  background: #e93030;
  border-radius: 50px;
}
.textarea-progress
  .progressbar-wrap
  .text-numbers-status
  .right-status-and-icon.progress-bar-success {
  color: #4d953d;
}
.textarea-progress
  .progressbar-wrap
  .text-numbers-status
  .right-status-and-icon.progress-bar-danger {
  color: #e93030;
}
.textarea-progress
  .progressbar-wrap
  .text-numbers-status
  .right-status-and-icon.progress-bar-warning {
  color: #ffc107;
}
.textarea-progress
  .progressbar-wrap
  .progressbar-back
  .progress-bar.progress-bar-success {
  background: #4d953d;
}
.textarea-progress
  .progressbar-wrap
  .progressbar-back
  .progress-bar.progress-bar-danger {
  background: #e93030;
}
.textarea-progress
  .progressbar-wrap
  .progressbar-back
  .progress-bar.progress-bar-warning {
  background: #ffc107;
}

[data-bk-color="progress1"] {
  background: rgba(234, 44, 44) !important;
}
[data-bk-color="progress2"] {
  background: rgba(232, 80, 58) !important;
}
[data-bk-color="progress3"] {
  background: rgba(229, 109, 58) !important;
}
[data-bk-color="progress4"] {
  background: rgba(228, 131, 58) !important;
}
[data-bk-color="progress5"] {
  background: rgba(227, 153, 58) !important;
}
[data-bk-color="progress6"] {
  background: rgba(231, 195, 37) !important;
}
[data-bk-color="progress7"] {
  background: rgba(225, 210, 49) !important;
}
[data-bk-color="progress8"] {
  background: rgba(226, 217, 45) !important;
}
[data-bk-color="progress9"] {
  background: rgba(218, 218, 55) !important;
}
[data-bk-color="progress10"] {
  background: rgba(208, 220, 53) !important;
}
[data-bk-color="progress11"] {
  background: rgba(196, 224, 58) !important;
}
[data-bk-color="progress12"] {
  background: rgba(180, 218, 58) !important;
}
[data-bk-color="progress13"] {
  background: rgba(157, 200, 51) !important;
}
[data-bk-color="progress14"] {
  background: rgba(132, 200, 46) !important;
}
[data-bk-color="progress15"] {
  background: rgba(43, 193, 40) !important;
}
[data-bk-color="progress16"] {
  background: rgba(48, 162, 44) !important;
}
[data-bk-color="progress17"] {
  background: rgba(38, 147, 43) !important;
}
[data-bk-color="progress18"] {
  background: rgba(37, 131, 33) !important;
}
[data-bk-color="progress19"] {
  background: rgba(33, 124, 30) !important;
}
[data-bk-color="progress20"] {
  background: rgba(21, 94, 15) !important;
}

[data-color="progress1"] {
  color: rgba(234, 44, 44) !important;
}
[data-color="progress2"] {
  color: rgba(232, 80, 58) !important;
}
[data-color="progress3"] {
  color: rgba(229, 109, 58) !important;
}
[data-color="progress4"] {
  color: rgba(228, 131, 58) !important;
}
[data-color="progress5"] {
  color: rgba(227, 153, 58) !important;
}
[data-color="progress6"] {
  color: rgba(231, 195, 37) !important;
}
[data-color="progress7"] {
  color: rgba(225, 210, 49) !important;
}
[data-color="progress8"] {
  color: rgba(226, 217, 45) !important;
}
[data-color="progress9"] {
  color: rgba(218, 218, 55) !important;
}
[data-color="progress10"] {
  color: rgba(208, 220, 53) !important;
}
[data-color="progress11"] {
  color: rgba(196, 224, 58) !important;
}
[data-color="progress12"] {
  color: rgba(180, 218, 58) !important;
}
[data-color="progress13"] {
  color: rgba(157, 200, 51) !important;
}
[data-color="progress14"] {
  color: rgba(132, 200, 46) !important;
}
[data-color="progress15"] {
  color: rgba(43, 193, 40) !important;
}
[data-color="progress16"] {
  color: rgba(48, 162, 44) !important;
}
[data-color="progress17"] {
  color: rgba(38, 147, 43) !important;
}
[data-color="progress18"] {
  color: rgba(37, 131, 33) !important;
}
[data-color="progress19"] {
  color: rgba(33, 124, 30) !important;
}
[data-color="progress20"] {
  color: rgba(21, 94, 15) !important;
}

.scrollFade {
  opacity: 1;
  pointer-events: all;
}
.scrollFade--hidden {
  opacity: 0;
  pointer-events: none;
}
.scrollFade--visible {
  opacity: 1;
  pointer-events: all;
}
.scrollFade--animate {
  transition: opacity 0.4s ease-in-out;
  transition-delay: 0.3s;
}
.range-slider .questions-title {
  margin: 0 0 30px 0;
}
.fade-out {
  opacity: 0.2;
  transition: all 0.3s;
}
.fade-in .fade-out {
  opacity: 1;
}
.submit-actions a {
  position: relative;
}
.submit-actions span.custom-tooltip {
  position: absolute;
  left: calc(50% - 50px);
  top: -60px;
  width: 100px;
  background: #fff;
  height: 40px;
  display: none;
  justify-content: center;
  align-items: center;
  border-radius: 7px;
  color: #000;
  border: solid 1px #eee;
}
.submit-actions a:hover span.custom-tooltip {
  display: flex;
}
.submit-actions span.custom-tooltip:after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 45px;
  width: 10px;
  height: 10px;
  background: #fff;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  border: solid 1px #e9eaea;
  border-left: none;
  border-top: 0;
}
.submit-actions a.left-arrow img,
a.submit-actions .right-arrow img {
  opacity: 0.4;
}
.submit-actions a.left-arrow:hover img,
a.submit-actions .right-arrow:hover img {
  opacity: 1;
}
.footer-text {
  text-align: center;
  margin: 30px 0 0 0;
}
.questions-ans-list .accord-qns.active .accord-title {
  pointer-events: none;
}
.page-container {
  margin-top: 30px;
}
.page-container
  .page-content
  .content-wrapper
  .pageSurveyView
  .page-header.page-header-default {
  background: 0;
  box-shadow: none;
  margin: 0;
}
.page-container {
  margin-top: 0;
}
.page-container
  .page-content
  .content-wrapper
  .pageSurveyView
  .page-header.page-header-default
  .breadcrumb-line {
  background: 0;
  border: 0;
}
.General-Information .survey_panel-info {
  padding: 0 !important;
  background: 0;
}
.page-container .page-content {
  padding: 0;
}
.page-container .page-content .content-wrapper {
  padding: 0;
}
.page-container
  .page-content
  .content-wrapper
  .pageSurveyView
  .content.panel_set {
  margin: 0 auto;
  padding: 15px 0 0 0;
}
.page-container
  .page-content
  .content-wrapper
  .pageSurveyView
  .content.panel_set
  #questionArea {
  background: #fff;
  margin: 0;
  padding: 35px;
  box-shadow: 0 1px 13px rgb(0 0 0 / 4%);
  border-radius: 15px;
}
.page-container
  .page-content
  .content-wrapper
  .pageSurveyView
  .content.panel_set
  #surveyProgress {
  display: none;
}
textarea.form-control,
.progress_area {
  max-width: 100%;
  padding: 0;
}
.progress_area .questionElm .radio-ques-box {
  width: auto;
  height: 48px;
  position: relative;
  margin: 0 0 35px 0;
  padding: 0 0 0 13px;
}
.progress_area .questionElm .radio-ques-box .form-group.flow-auto {
  padding: 0;
  width: 100%;
}
.progress_area .questionElm .radio-ques-box .radio.radio-primary {
  width: 100%;
  position: relative;
  margin: 0;
  height: 150%;
}
.progress_area .questionElm .radio-ques-box .radio.radio-primary label {
  border: solid 1px #e7e8ea;
  border-radius: 8px;
  position: relative;
  width: 100%;
  height: 100%;
  left: 0;
  overflow: hidden;
  transition: all 0s;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  padding: 0 23px;
  min-width: 98px;
}
.progress_area
  .questionElm
  .radio-ques-box
  .radio.radio-primary
  input[type="radio"] {
  margin: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
  border-radius: 0;
}
.questionElm .form-group.flow-auto {
  padding: 0;
}
.row.questions.cust_rd_hdng .cust_rd_hdng_child.m-col-80p.row {
  width: 75%;
  align-items: center;
  font-weight: 700;
  text-align: center;
  line-height: 20px;
  font-size: 15px;
}
.row.questions.cust_rd_hdng .m-col-20p,
.questionElm.row .row.answers .m-col-20p.mobile-ans-title {
  width: 40%;
  display: flex;
  align-items: center;
}
.questionElm.row .row.answers .answer_child.m-col-80p,
.row.questions.cust_rd_hdng .cust_rd_hdng_child.m-col-80p {
  width: 60%;
  align-items: center;
  font-weight: 700;
  text-align: center;
  line-height: 20px;
  font-size: 15px;
  display: flex;
  margin: 0;
}
.questionElm.row .row.answers .answer_child .radio.radio-primary {
  width: 118px;
  height: 42px;
  position: relative;
  margin: 0 auto;
}
.questionElm.row .row.answers .answer_child .radio.radio-primary label {
  border: solid 1px #e7e8ea;
  border-radius: 8px;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  overflow: hidden;
  transition: all 0.5s;
  white-space: nowrap;
}
.questionElm.row
  .row.answers
  .answer_child
  .radio.radio-primary
  input[type="radio"] {
  margin: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
  border-radius: 0;
}
.questionElm.row .row.answers .answer_child .radio.radio-primary label:before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background: #fff;
  border: solid 1px #cacaca;
  left: calc(50% - 11px);
  top: calc(50% - 11px);
  border-radius: 50px;
  margin: 0;
}
.progress_area .questionElm.row .row.questions.cust_rd_hdng,
.progress_area .questionElm.row .row.answers {
  margin-bottom: 26px;
}
.questionElm.row .row.answers .answer_child .radio.radio-primary label:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /*box-shadow: inset 0 0 10px rgb(217 134 238 / 20%);*/
  opacity: 0;
  transform: scale(1);
  background: 0;
  border-radius: 0;
  margin: 0;
}
.questionElm.row
  .row.answers
  .answer_child
  .radio.radio-primary
  label
  span.mobile-option-title {
  display: none;
}
.questionElm.row .row.answers .answer_child .radio.radio-primary:hover label {
  /*box-shadow: 0 0 13px rgb(217 134 238 / 20%);
  border-color: #ece0ef;*/
}
.questionElm.row
  .row.answers
  .answer_child
  .radio.radio-primary:hover
  label::before {
  /*border: solid 1px #7a58a5;
  background: #c4b2d6;*/
}
.questionElm.row
  .row.answers
  .answer_child
  .radio.radio-primary
  input[type="radio"]:checked
  + label {
  /*border-color: #c4b2d6;
  background: #ece0ef;*/
}

/*added 2022.01.28: so radio center circle stays dark purple*/
.questionElm.row
  .row.answers
  .answer_child
  .radio.radio-primary
  input[type="radio"]:checked
  + label::before {
  /*border: solid 1px #7a58a5;
  background: #c4b2d6;*/
}

.questionElm.row
  .row.answers
  .answer_child
  .radio.radio-primary:hover
  label:after {
  opacity: 1;
}
.questionMarkup .panel-heading {
  background: none !important;
}
.questionMarkup .panel-heading .tab-content-head {
  font-size: 18px;
}
.row.questionMarkup {
  border-top: solid 1px #e5e5e5;
  padding-top: 30px;
}
.row.questionMarkup:first-child {
  border: 0;
  padding-top: 0;
}
.sidebar-category .category-content form.sidebar_leftForm {
  margin: 15px 0 0 0;
} /* 40px 0 0 0 */
.sidebar-category
  .category-content
  form.sidebar_leftForm
  .panel.sideBarMenu
  .panel-heading {
  display: none;
}
.sidebar-category .category-content form.sidebar_leftForm .panel.sideBarMenu {
  border: 0;
  box-shadow: none;
  margin: 0;
  box-shadow: 0 1px 13px rgb(0 0 0 / 4%);
  border-radius: 10px;
  opacity: 0.8;
  transition: all 0.3s;
}
.sideBarMenu.fade-out {
  opacity: 1 !important;
}
.sidebar-category
  .category-content
  form.sidebar_leftForm
  .panel.sideBarMenu
  .panel-body {
  display: flex;
  align-items: center;
}
.sidebar-category
  .category-content
  form.sidebar_leftForm
  .panel.sideBarMenu
  .panel-body
  .section-title {
  margin-right: 20px;
  font-size: 20px;
  color: rgb(91, 64, 131);
}
.sidebar-category
  .category-content
  form.sidebar_leftForm
  .panel.sideBarMenu
  .panel-body
  ul.nav {
  align-items: center;
}
.sidebar-category
  .category-content
  form.sidebar_leftForm
  .panel.sideBarMenu
  .panel-body
  ul.nav
  li {
  width: auto;
  padding: 5px 8px;
}
.sidebar-category
  .category-content
  form.sidebar_leftForm
  .panel.sideBarMenu
  .panel-body
  ul.nav
  li
  a {
  display: flex;
  align-items: center;
  padding: 3px 20px 4px 3px;
  margin: 0;
  color: #404040;
  font-size: 16px;
  background: #fff;
  border: solid 1px #e7e7e7;
  border-radius: 5px;
}
.sidebar-category
  .category-content
  form.sidebar_leftForm
  .panel.sideBarMenu
  .panel-body
  ul.nav
  li
  a:hover {
  background: rgb(152 128 186 / 13%);
}
.sidebar-category
  .category-content
  form.sidebar_leftForm
  .panel.sideBarMenu
  .panel-body
  ul.nav
  li
  a.selected {
  background: #9880ba;
  color: #fff;
  border-color: #ffffff;
}
.sidebar-category
  .category-content
  form.sidebar_leftForm
  .panel.sideBarMenu
  .panel-body
  ul.nav
  li
  .grey-bg.selected {
  background: rgb(180, 180, 180);
  color: #fff;
  border-color: #ffffff;
}
.sidebar-category
  .category-content
  form.sidebar_leftForm
  .panel.sideBarMenu
  .panel-body
  ul.nav
  li
  .blue-bg.selected {
  background: #7288b7;
  color: #fff;
  border-color: #ffffff;
}
.sidebar-category
  .category-content
  form.sidebar_leftForm
  .panel.sideBarMenu
  .panel-body
  ul.nav
  li
  a.selected
  i {
  background-color: white;
  border-color: white;
}
.sidebar-category
  .category-content
  form.sidebar_leftForm
  .panel.sideBarMenu
  .panel-body
  ul.nav
  li
  a
  i {
  font-size: 17px;
  display: flex;
  justify-content: center;
  margin: 0px 7px 0px 0px;
  border-style: solid;
  border-radius: 30px;
  height: 30px;
  width: 30px;
  align-items: center;
  border-width: 1px;
}
.sidebar-category
  .category-content
  form.sidebar_leftForm
  .panel.sideBarMenu
  .panel-body
  ul.nav
  li
  a
  .fa-user {
  color: #9880ba;
}
.sidebar-category
  .category-content
  form.sidebar_leftForm
  .panel.sideBarMenu
  .panel-body
  ul.nav
  li
  a
  .fa-user-tie {
  color: grey;
}
.sidebar-category
  .category-content
  form.sidebar_leftForm
  .panel.sideBarMenu
  .panel-body
  ul.nav
  li
  a
  .fa-user-group {
  color: #7288b7;
}
.form-group.flow-auto .checkbox.checkbox-primary.other-checkbox {
  padding: 6px;
  margin: 0 0 0 -4px;
  position: relative;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 8px;
  padding-left: 0;
}
.form-group.flow-auto .checkbox.checkbox-primary.other-checkbox .widthForm5 {
  flex: 1;
}
.form-group.flow-auto
  .checkbox.checkbox-primary.other-checkbox
  .widthForm5
  input {
  background: 0;
  border: solid 1px #e7e8ea;
  border-radius: 6px;
  height: 46px;
}
.form-group.flow-auto
  .checkbox.checkbox-primary.other-checkbox
  input[type="checkbox"],
.form-group.flow-auto .checkbox.checkbox-primary.other-checkbox label:before {
  display: none;
}
.form-group.flow-auto
  .checkbox.checkbox-primary.other-checkbox
  input[type="checkbox"]:checked
  + label {
  background: 0;
}
.form-group.flow-auto
  .checkbox.checkbox-primary.other-checkbox
  input[type="checkbox"]:checked
  + label
  + .widthForm5
  input {
  background: #fff;
  box-shadow: 0 0 4px rgb(0 0 0 / 32%);
}
.form-group.flow-auto .checkbox.checkbox-primary.other-checkbox label:hover {
  background: 0;
}
.page-container .page-content .content-wrapper img.centerImg.loaderImg {
  position: fixed;
  left: calc(50% - 27px);
  top: calc(50% - 27px);
  z-index: 9999;
}
input.ShortNotes.form-control.notes {
  height: 48px;
  width: 100% !important;
  max-width: 400px;
}
.progress_area
  .questionElm
  .radio-ques-box
  .radio.radio-primary.yes
  label::before {
  content: "\f00c";
  font: normal normal normal 14px/1 FontAwesome;
  border: 0;
  left: 0;
  position: static;
  font-size: 18px;
  margin: 0 4px 0 0;
  /*color: #caccd1;*/
  background: 0;
}
.progress_area
  .questionElm
  .radio-ques-box
  .radio.radio-primary.no
  label::before {
  content: "\f00d";
  font: normal normal normal 14px/1 FontAwesome;
  border: 0;
  left: 0;
  position: static;
  font-size: 18px;
  margin: 0 4px 0 0;
  /*color: #caccd1;*/
  background: 0;
}
.progress_area
  .questionElm
  .radio-ques-box
  .radio.radio-primary.maybe
  label::before {
  content: "\f068";
  font: normal normal normal 14px/1 FontAwesome;
  border: 0;
  left: 0;
  position: static;
  font-size: 18px;
  margin: 0 4px 0 0;
  /*color: #caccd1;*/
  background: 0;
}
.progress_area
  .questionElm
  .radio-ques-box
  .radio.radio-primary.yes
  input[type="radio"]:checked
  + label::before,
.progress_area
  .questionElm
  .radio-ques-box
  .radio.radio-primary.no
  input[type="radio"]:checked
  + label::before,
.progress_area
  .questionElm
  .radio-ques-box
  .radio.radio-primary.maybe
  input[type="radio"]:checked
  + label::before {
  /*color: #7754a3;*/
}

.progress_area
  .questionElm
  .radio-ques-box
  .radio.radio-primary
  input[type="radio"]:active
  + label,
.progress_area
  .questionElm
  .radio-ques-box
  .radio.radio-primary
  input[type="radio"]:focus
  + label {
  /*border-color: #c4b2d6 !important;
  background: #ece0ef;*/
}

.progress_area
  .questionElm
  .radio-ques-box
  .radio.radio-primary
  input[type="radio"]:active
  + label:before,
.progress_area
  .questionElm
  .radio-ques-box
  .radio.radio-primary
  input[type="radio"]:active
  + label:after {
  display: none;
}

.textarea-progress textarea.form-control {
  /* border-color: #ddd; */
  padding: 10px 0 0 10px;
  font-size: 14px;
}
/* ul.nav.navbar.nav-pills.pull-right.left_class{margin: 30px 0 0 0px;} */
.progress_area
  .questionElm
  .radio-ques-box
  .radio.radio-primary
  input[type="radio"]:active
  + label:after,
.progress_area
  .questionElm
  .radio-ques-box
  .radio.radio-primary
  input[type="radio"]:active
  + label:before {
  display: block !important;
  color: #7754a3;
}

/*** Responsive csss ***/
@media (min-width: 992px) {
  .questions-ans-list .accord-qns form.accord-panel {
    display: flex !important;
  }
  .questionElm.row .row.answers .answer_child.m-col-80p,
  .row.questions.cust_rd_hdng .cust_rd_hdng_child.m-col-80p {
    display: flex !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

@media (max-width: 991px) {
  .questions-row .questions-ans-list ul.headings {
    display: none;
  }
  .questions-ans-list {
    margin: 20px 0 0 0;
  }
  .logo {
    text-align: center;
  }
  header.survey-header {
    padding: 10px 0 5px 0;
  }
  .step-slider {
    margin: 20px 0 -70px 0;
  }
  .General-Information {
    margin: 30px 0 0 0;
    text-align: center;
    padding: 20px;
  }
  .step-slider ol {
    margin: 0 auto;
    padding: 0 0px 0 0;
    display: inline-flex;
    justify-content: space-around;
    width: 100%;
  }
  .step-slider ol li {
    margin: 0px 0 0 0px;
  }
  .step-slider {
    text-align: center !important;
  }
  .survey-page-heading {
    display: none;
  }
  .buttons-action {
    text-align: center;
  }
  .questions-ans-list .accord-qns .accord-title {
    width: 100%;
    pointer-events: auto;
  }
  .questions-ans-list .accord-qns form.accord-panel {
    display: none;
    max-width: 100%;
    margin-top: 8px;
  }
  .questions-ans-list .accord-qns form.accord-panel .form-check {
    width: 100%;
    margin-bottom: 12px;
    height: auto;
    padding: 0px 0;
  }
  .questions-ans-list .accord-qns {
    display: block;
    margin: 0;
    padding: 10px 0;
    border-bottom: solid 1px #eaeaea;
  }
  .questions-ans-list .accord-qns:last-child {
    margin: 0 0 -17px 0;
  }
  .questions-ans-list .accord-qns .accord-title {
    width: 100%;
    font-weight: 600;
    position: relative;
  }
  .questions-ans-list .accord-qns .accord-title:after {
    content: "\f067";
    font: normal normal normal 16px/1 FontAwesome;
    float: right;
    margin: 6px 10px 0 0;
    color: #d9d7de;
  }
  .questions-ans-list .accord-qns.active .accord-title:after {
    content: "\f068";
    color: #7754a3;
  }
  .questions-ans-list
    .accord-qns
    form.accord-panel
    .form-check
    .show-in-mobile {
    display: block;
    position: static;
    left: 0;
    top: 0;
    z-index: 9;
    width: 100%;
    height: 100%;
    padding: 9px 50px 9px 20px;
  }
  .questions-ans-list
    .accord-qns
    form.accord-panel
    .form-check
    label.form-check-label:before {
    left: calc(100% - 36px);
  }
  .second-qsn-options form.questions-panel,
  .third-qsn-options form.questions-panel {
    display: block;
  }
  .second-qsn-options form.questions-panel .form-check,
  .third-qsn-options form.questions-panel .form-check {
    width: 100%;
    margin: 0 0 13px 0;
  }
  .second-qsn-options form.questions-panel .form-check label.form-check-label,
  .progress_area .questionElm .radio-ques-box .radio.radio-primary label {
    justify-content: flex-start;
    padding-left: 22px;
  }
  .General-Information .gen-info {
    text-align: left;
  }
  .questions-ans-list
    .accord-qns
    form.accord-panel
    .form-check
    label.form-check-label {
    position: relative;
  }
  .progress_area .checkbox.checkbox-primary {
    width: calc(50% - 20px);
  }
  .textarea-progress .progressbar-wrap {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 20px 0 8px 0px;
  }
  .buttons-action {
    margin: 20px 0 0 0px;
  }
  .step-slider ol .progressbar {
    max-width: 100%;
  }
  .sidebar-category .category-content form.sidebar_leftForm {
    margin: 70px 0 0 0;
  }
  .progress_area .questionElm.row .row.questions.cust_rd_hdng {
    display: none;
  }
  .progress_area .questionElm.row .row.answers {
    display: block;
    margin: 0;
  }
  .questionElm.row .row.answers .answer_child.m-col-80p {
    width: 100%;
    display: none;
    padding: 0;
  }
  .questionElm.row .row.answers .answer_child.m-col-80p .qa-width-fixed {
    width: 100% !important;
  }
  .questionElm.row .row.answers .answer_child .radio.radio-primary {
    width: 100%;
    margin: 0 0 20px 0;
  }
  .questionElm.row
    .row.answers
    .answer_child
    .radio.radio-primary
    label:before {
    left: calc(100% - 38px);
  }
  .questionElm.row
    .row.answers
    .answer_child
    .radio.radio-primary
    label
    span.mobile-option-title {
    display: block;
    position: static;
    left: 0;
    top: 0;
    z-index: 9;
    width: 100%;
    height: 100%;
    padding: 10px 50px 9px 20px;
  }
  .questionElm.row .row.answers .answer_child .radio.radio-primary label {
    padding: 0;
    font-size: 16px;
  }
  .questionElm.row .row.answers .m-col-20p.mobile-ans-title {
    width: 100%;
    font-weight: 600;
    position: relative;
    padding: 10px 40px 10px 0px;
    clear: both;
    font-size: 16px;
    border-top: solid 1px #eaeaea;
  }
  .questionElm.row .row.answers .m-col-20p.mobile-ans-title:after {
    content: "\f067";
    font: normal normal normal 16px/1 FontAwesome;
    float: right;
    margin: 6px 10px 0 0;
    color: #d9d7de;
    position: absolute;
    right: 0;
    top: 7px;
  }
  .questionElm.row .row.answers.active .m-col-20p.mobile-ans-title:after {
    content: "\f068";
    color: #7754a3;
  }
  .progress_area .questionElm.row .row.answers.active .mobile-ans-title {
    pointer-events: none;
  }
  .progress_area .questionElm.row .row.answers.answer1 .mobile-ans-title {
    border: none;
  }
  .progress_area .questionElm .radio-ques-box {
    width: 100%;
    padding: 0;
    margin: 0 0 35px 0;
  }
  .pageSurveyView div#topButtons ul.nav.navbar.nav-pills.pull-right.left_class {
    justify-content: center;
    margin: 0 0 10px 0;
    width: 100%;
  }
  .progress_area .questionElm.row .col-md-4 {
    width: 100%;
    padding: 0;
  }
  .progress_area .checkbox.checkbox-primary {
    width: calc(100% - 0px);
  }
  .sidebar-category
    .category-content
    form.sidebar_leftForm
    .panel.sideBarMenu
    .panel-body {
    padding: 10px;
  }
  .sidebar-category
    .category-content
    form.sidebar_leftForm
    .panel.sideBarMenu
    .panel-body
    ul.nav {
    align-items: center;
    overflow: auto;
    flex-wrap: nowrap;
  }
}

@media (max-width: 767px) {
  .questions-row {
    padding: 35px 15px;
  }
  .progress_area .checkbox.checkbox-primary {
    width: calc(100% - 0px);
    margin: 0 0 12px 0;
  }
  .progress_area .checkbox.checkbox-primary label {
    justify-content: center;
  }
  .pageSurveyView div#topButtons,
  .page-container
    .page-content
    .content-wrapper
    .pageSurveyView
    .content.panel_set {
    padding: 0;
  }
  .sidebar-category
    .category-content
    form.sidebar_leftForm
    .panel.sideBarMenu
    .panel-body
    ul.nav
    li
    a {
    font-size: 13px;
  }
  .page-container
    .page-content
    .content-wrapper
    .pageSurveyView
    .content.panel_set
    #questionArea {
    padding: 35px 15px;
    padding-bottom: 0;
  }
  .questionMarkup .panel-heading .tab-content-head,
  .questionElm.row .row.answers .m-col-20p.mobile-ans-title {
    font-size: 14px;
  }
  .questionElm.row .row.answers .answer_child .radio.radio-primary label {
    white-space: normal;
    font-size: 14px;
  }
  .questionElm.row .row.answers .answer_child .radio.radio-primary,
  .questionElm.row
    .row.answers
    .answer_child
    .radio.radio-primary
    label
    span.mobile-option-title,
  .questionElm.row .row.answers .answer_child .radio.radio-primary label {
    height: auto;
  }
  .questionElm.row .row.answers .answer_child .radio.radio-primary label {
    position: relative;
  }
  .progress_area .questionElm.row {
    margin: 0;
  }
  .progress_area .questionElm.row .matrix.col-lg-12,
  .progress_area .questionElm.row .col-sm-12 {
    padding: 0;
  }
  .General-Information .survey_panel-info {
    text-align: center;
  }
}

@media (max-width: 430px) {
  .questions-ans-list
    .accord-qns
    form.accord-panel
    .form-check
    .show-in-mobile {
    font-size: 14px;
    padding-top: 12px;
  }
  .step-slider ol .progressbar {
    top: 13px;
  }
  .step-slider ol li.complete span {
    font-size: 12px;
  }
  .step-slider ol li {
    margin: 0px 0 0 0px;
    width: 27px;
    height: 27px;
    font-size: 14px;
  }
  .submit-actions .Save-and-Continue {
    padding: 9px 14px;
    font-size: 14px;
    margin: 0 10px;
  }
  .range-slider {
    padding: 0 0px;
  }
  .range-slider .slider-ruler ul,
  .range-slider .slider-labels {
    font-size: 12px;
  }
  .range-slider__range::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
  }
  .range-slider__range::-moz-range-thumb {
    width: 22px;
    height: 22px;
  }
  .Sandbox-qsn-options form.questions-panel {
    margin: 15px 0 0px 0;
  }
  .step-slider ol {
    width: 100%;
  }
  .range-slider .slider-ruler ul li h5 {
    font-size: 14px;
  }
  .range-slider .slider-ruler ul li.active h5 {
    font-size: 16px;
  }
  .questions-title {
    font-size: 14px;
  }
  .btn-report-action {
    border: 1px solid #ccc;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    border-radius: 5px;
  }
  .btn-report-action:hover {
    background-color: #f0f0f0;
  }
  .color-picker-btn {
    background-color: #9880ba;
    color: white;
    border: none; /* Optional: To remove any borders */
}
    .btn-color-action:hover {
        background-color: #a18bc1 !important;
        color: #fff !important;
    }
    .btn-report-action:hover {
        background-color: #0056b3;
    }
    /* #colorPickerContainer {
      color: #a18bc1 !important;
      background-color: #fff !important;
      border: 1px solid #a18bc1;
      display: none;
      position: absolute;
      padding: 15px; 
      font-size: 12px;
      border-radius: 4px;
      cursor: pointer;
      text-decoration: none;
      transition: background-color 0.3s ease;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      width: 1000px; 
      max-height: 500px; 
      overflow: auto;
  }
   */
.minicolors-theme-bootstrap .minicolors-input {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid #ddd;
}
.minicolors-theme-bootstrap .minicolors-swatch {
    border-radius: 4px;
}
.btn-color-action {
    font-size: 12px;
    padding: 8px 15px;
}
  #colorPickerControls {
    display: flex;
    align-items: center;
  }
}
.color-wheel {
  --num-colors: 12;
  --color-size: calc(100% / var(--num-colors));
  width: 200px;
  height: 200px;
  position: relative;
  border-radius: 50%;
  cursor: pointer;
  background: conic-gradient(
    #f22 calc(0 * var(--color-size)) calc(1 * var(--color-size)), 
    #f06 calc(1 * var(--color-size)) calc(2 * var(--color-size)), 
    #63b calc(2 * var(--color-size)) calc(3 * var(--color-size)), 
    #44b calc(3 * var(--color-size)) calc(4 * var(--color-size)), 
    #09f calc(4 * var(--color-size)) calc(5 * var(--color-size)), 
    #0af calc(5 * var(--color-size)) calc(6 * var(--color-size)), 
    #0bd calc(6 * var(--color-size)) calc(7 * var(--color-size)), 
    #098 calc(7 * var(--color-size)) calc(8 * var(--color-size)), 
    #0a4 calc(8 * var(--color-size)) calc(9 * var(--color-size)), 
    #7c3 calc(9 * var(--color-size)) calc(10 * var(--color-size)), 
    #fe0 calc(10 * var(--color-size)) calc(11 * var(--color-size)), 
    #fb0 calc(11 * var(--color-size)) calc(12 * var(--color-size))
  );
  transform: rotate(calc(-180deg / var(--num-colors)));
}
.color-wheel::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background: white;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
}
.custom-row {
  margin-left: 8px; /* Default margin */
}
@media (max-width: 1200px) {
  .custom-row {
      margin-left: 100px; /* Adjust margin for medium screens */
  }
}
@media (max-width: 992px) {
  .custom-row {
      margin-left: 80px; /* Adjust margin for small screens */
  }
}
@media (max-width: 768px) {
  .custom-row {
      margin-left: 40px; /* Adjust margin for extra small screens */
      flex-direction: column; /* Stack elements vertically on small screens */
      align-items: flex-start;
  }
  .nav-item {
      margin-bottom: 10px; /* Add spacing between items */
  }
}
@media (max-width: 576px) {
  .custom-row {
      margin-left: 20px; /* Further adjust margin for very small screens */
  }
}
@media (min-width: 992px){
.col-lg-6 {
  flex: 0 0 auto;
  width: 36%;
}
}
@media (min-width: 769px) {
  .navbar {
      padding-left: 0px;
       padding-right: 0px;
  }
}
#colorPickerIcon {
  width: 50px;
  height: 50px;
}
#resetColor {
  margin-right: 5px;
}

.page-container {
  flex: 1;
}

footer {
  text-align: center;
}

.btn-lg{
	padding: 12px 30px !important;
	  margin: 0 20px;
	  border-radius: 9px;
	  color: #fff;
	  font-weight: 400;
	  text-decoration: none;
	  border: none !important;
}

.custom-box-style{
	background: #fff;
  margin: 0;
  padding: 35px;
  box-shadow: 0 1px 13px rgb(0 0 0 / 4%);
  border-radius: 15px;
  
}