:root {
  --green-color-1: #039d4c;
  --green-color-2: #2e3c34;
  --green-color-3: #00a94f;
  --green-color-4: #51a378;
  --green-color-5: #005736;
  --green-color-6: #00a950;
  --green-color-7: #3d5160;
  --light-green-1: #f2fbf6;
  --light-green-2: #e7f7ee;
  --light-gray-1: #f5f5f5;
  --light-gray-2: #eaeaea;
  --light-gray-3: #e9e9e9;
  --light-gray-4: #ddd;
  --light-gray-5: #eee;
  --light-gray-6: #ebebeb;
  --gray-color-1: #999;
  --gray-color-2: #666;
  --gray-color-3: #808080;
  --gray-color-4: #707070;
  --dark-color-1: #333;
  --red-color-1: #ee0000;
  --red-color-2: #ff0000;
  --red-color-3: #ee0f00;
  --red-color-4: #fe1d1a;
  --red-color-5: #c81814;
  --red-color-6: #ed2226;
  --red-color-7: #ee0418;
  --yellow-color-1: #fdc32d;
  --yellow-color-2: #ffce00;
  --orange-color-1: #ff6700;
  scroll-behavior: auto !important;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Kanit, sans-serif;
}

*:focus {
  outline: none;
}

html {
  scroll-padding-top: 5rem;
}

body {
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
}

/*############################ Loading ###################################*/
.load-div {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 100000;
  background: white;
}

.loader-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.loader {
  border: 8px solid #ccc;
  border-radius: 50%;
  border-top: 8px solid #00a950;
  width: 60px;
  height: 60px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* .icw main{
    max-width: 2400px;
    margin: auto;
} */

.bg-green {
  background: linear-gradient(
    90deg,
    rgba(0, 150, 93, 1) 0%,
    rgba(111, 207, 139, 1) 100%
  );
}
.bg-darkgreen {
  background-color: var(--green-color-7);
}

.bg-blue-gradient {
  background: linear-gradient(90deg, #62abb2 0%, #258891 100%);
}

.bg-green-gradient {
  background: linear-gradient(
    90deg,
    rgba(0, 150, 93, 1) 0%,
    rgba(111, 207, 139, 1) 100%
  );
}
.text-teal {
  color: #0a5d64 !important;
}
.text-green {
  color: #00a950 !important;
}

/*############################ Container ###################################*/

.icw .wrapper {
  padding: 0 20px;
  max-width: 768px;
  margin: 0 auto;
}

.icw .content-section {
  display: block;
  /* position:absolute; */
  margin-top: -40px;
  background-color: transparent;
  z-index: 10;
}

.icw .content-wrapper {
  position: relative;
  margin: 0 auto;
  width: 100vw;
  border: solid 1px #fff;
  background-color: #fff;
  padding: 0 20px;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

/*############################ Buttons ###################################*/

.icw .btn-main {
  width: 100%;
  height: 46px;
  border: none;
  background-color: transparent;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  color: white;
}

.icw .btn-green {
  min-height: 50px;
  border: none;
  background: linear-gradient(
    90deg,
    rgba(0, 150, 93, 1) 0%,
    rgba(111, 207, 139, 1) 100%
  );
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  color: white;
}
.icw .btn-green:hover{
  background: linear-gradient(
    90deg,
    rgb(0, 121, 75) 0%,
    rgb(72, 155, 97) 100%
  );
}

.btn-darkblue-gradient {
  height: 50px;
  border: none;
  background: linear-gradient(90deg, #3d5160 0%, #20353b 100%);
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  vertical-align: middle;
}
.btn-darkblue-gradient:hover {
  background: linear-gradient(180deg, #3d5160 0%, #20353b 100%);
  color: white;

  /* border: solid 2px #20353b; */

}
.icw .btn-card {
  width: 50%;
  height: 46px;
  border: none;
  background-color: transparent;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  color: white;
}

.icw .btn-refresh {
  /* width: 48%; */
  height: 46px;
  border: none;
  background-color: transparent;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  color: var(--green-color-6);
}

.icw .btn-main.btn-first,
.icw .btn-card.btn-first {
  background-color: var(--light-gray-4);
  color: var(--gray-color-2);
}

.icw .btn-main.btn-first.active,
.icw .btn-card.btn-first.active {
  background-color: var(--green-color-6);
  color: white;
}

.icw .icon-white {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: var(--green-color-6);
  font-size: 14px;
  border-radius: 100%;
  width: 24px;
  height: 24px;
}

.icw .icon-white.disabled {
  color: var(--gray-color-2);
}

.icw .icon-green {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--green-color-6);
  color: white;
  font-size: 14px;
  border-radius: 100%;
  width: 24px;
  height: 24px;
}

.icw .checkbox-card .custom-check .ic-kbookbank {
  background: url("../../../../service-recommendation/assets/theme/img/icon/kbankbook-gray.png")
    no-repeat;
  width: 50px;
  height: 41px;
  margin-bottom: 6px;
  margin-top: 5px;
  background-size: contain;
}

.icw .checkbox-card > input:checked + .custom-check .ic-kbookbank {
  background: url("../../../../service-recommendation/assets/theme/img/icon/kbankbook-white.png")
    no-repeat;
  width: 50px;
  height: 40px;
  margin-bottom: 6px;
  margin-top: 5px;
  background-size: contain;
}

.icw h1,
.icw h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 0;
  color: var(--dark-color-1);
}
.icw h3,
.icw h4,
  .icw p,
  .icw li {
    font-size: 12px;
  }
@media (min-width: 767px) {
  .icw h3,
  .icw h4,
  .icw p,
  .icw li {
    font-size: 16px;
  }
}

.icw .seemore-link {
  text-decoration: underline;
  color: var(--green-color-3);
  font-weight: 600;
}

.icw .input-group {
  width: 100%;
  height: 46px;
  position: relative;
}

.icw .input-group > input {
  border: none;
  border: 1px solid var(--light-gray-2);
  border-radius: 40px;
  width: 100%;
  height: 100%;
  padding-right: 50px;
  padding-left: 20px;
  font-size: 16px;
}

.icw .input-group > input:focus {
  outline: none;
  box-shadow: 0 0 1px 1px var(--green-color-3);
  -webkit-box-shadow: 0 0 1px 1px var(--green-color-3);
  -moz-box-shadow: 0 0 1px 1px var(--green-color-3);
}

.icw .input-group > input::placeholder {
  color: var(--gray-color-1);
}

.icw .input-group > .search-btn {
  background-color: var(--green-color-3);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
}

.icw .input-group > .search-btn i.ic-npa {
  color: white;
}

.icw .more-filter-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background-color: var(--green-color-3);
}

.icw .scroll-pagi {
  width: fit-content;
  height: 6px;
  border-radius: 10px;
  background-color: var(--light-gray-3);
  display: flex;
  align-items: center;
  left: 50%;
  transform: translateX(-50%);
}

.icw .scroll-pagi .swiper-pagination-bullet {
  width: 20px;
  height: 6px;
  border-radius: 5px;
  margin: 0;
  background-color: transparent;
}

.icw .scroll-pagi .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--green-color-3);
}

.modal-backdrop {
  z-index: 2050;
}

/*################################ K Property tab content ###############################*/

.icw .sm-thumbnail-inner {
  width: 140px;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 15px;
  border: 1px solid #eee;
  box-shadow: 0 0 5px 1px var(--light-gray-2);
  border-radius: 10px;
  background-color: white;
}

.icw .sm-thumbnail-inner img {
  height: 35px;
  margin-bottom: 10px;
}

.icw .sm-thumbnail-inner i.ic-npa {
  font-size: 35px;
  margin-bottom: 5px;
  color: var(--green-color-3);
  pointer-events: none;
}

.icw .sm-thumbnail-inner p {
  font-weight: 400;
  margin-bottom: 0;
  color: var(--dark-color-1);
  pointer-events: none;
  user-select: none;
}

.icw .sm-thumbnail-inner p.title {
  font-size: 16px;
  height: 32px;
  color: var(--green-color-3);
}
.icw .sm-thumbnail-inner p.title span {
  font-size: 24px;
}

/*###########################  Mobile more filter  ###############################  */

.icw .checkbox-card {
  width: 45%;
}

.icw .checkbox-card .custom-check {
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding-top: 25px;
  align-items: center;
  height: 120px;
  position: relative;
  font-size: 16px;
  color: var(--gray-color-2);
  border-radius: 20px;
  background-color: #fff;
  cursor: pointer;
  margin-bottom: 5px;
  border: solid 2px var(--light-gray-6);
}

.icw .checkbox-card .custom-check i {
  font-size: 40px;
  color: var(--gray-color-6);
  /* margin-bottom: 10px; */
}

.icw .checkbox-card p {
  font-size: 16px;
  color: var(--gray-color-2);
  text-align: center;
  margin-bottom: 0;
  line-height: 1.3rem;
}

.icw .checkbox-card .custom-check .custom-check-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: white;
  border: solid 2px var(--light-gray-6);
  position: absolute;
  top: 10px;
  right: 10px;
}

.icw .checkbox-card > input:checked + .custom-check {
  border: 2px solid var(--green-color-6);
  background-color: var(--green-color-6);
  color: white;
}

.icw .checkbox-card > input:checked + .custom-check .custom-check-icon {
  border: none;
  background: url("../img/icon/check-mark-white.svg") no-repeat center center /
    100%;
}

.icw .checkbox-card > input:checked + .custom-check p,
.icw .checkbox-card > input:checked + .custom-check i.ic-npa {
  color: white;
}

.icw .select-field {
  width: 100%;
}

.icw select {
  width: 100%;
}

.icw .custom-check.icon-word p {
  font-size: 18px;
  /* font-weight: 700; */
}

.icw .custom-check.icon-word {
  justify-content: center;
  padding-top: 0;
}

.select2-container {
  margin: 0;
}

.select2-container.select2-container--open {
  z-index: 2150;
}

.select2-container *:focus {
  outline: none;
  box-shadow: none;
}

.icw .select-field .select2-container {
  width: 100% !important;
}

.icw .select-field .select2-selection__rendered {
  padding-left: 15px;
  padding-right: 15px;
  font-family: "Helvetica";
  font-size: 16px;
  color: var(--green-color-6);
}

.icw .select-field .select2-selection--single {
  height: 30px !important;
  /* border-radius: 50px; */
  border: none;
  position: relative;
}

.icw .select-field .select2-selection__placeholder {
  color: var(--gray-color-2);
  font-family: "Helvetica";
  font-size: 16px;
}

.icw .select-field .select2-selection__clear {
  display: none !important;
}

.icw .select2-container .select2-selection--single .select2-selection__clear {
  display: none !important;
}

.select2-dropdown {
  background-color: #f2fbf6;
}

.select2-container--open .select2-dropdown--above {
  border: 1px solid var(--light-gray-2);
  border-radius: 10px;
}

.select2-container--open .select2-dropdown--below {
  border: 1px solid var(--light-gray-2);
  border-radius: 10px;
  margin: 5px 0;
  min-width: 120px !important;
}

.select2-search--dropdown {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  padding: 10px;
  background-color: var(--light-gray-1);
}

.select2-search--dropdown .select2-search__field {
  height: 46px;
  border-radius: 50px;
  padding: 2px 15px;
}

.select2-search--dropdown .select2-search__field:focus {
  outline: none;
  box-shadow: 0 0 1px 1px var(--green-color-3);
  -webkit-box-shadow: 0 0 1px 1px var(--green-color-3);
  -moz-box-shadow: 0 0 1px 1px var(--green-color-3);
}

.select2-results__option {
  /* padding: 15px 15px; */
  font-family: "Helvetica";
  font-size: 14px;
  color: var(--gray-color-1);
  padding: 5px 15px;
}

.select2-container--default .select2-results > .select2-results__options {
  margin-top: 12px;
  margin-bottom: 12px;
}

.select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--green-color-3);
  font-family: "Helvetica";
  font-size: 14px;
  padding: 5px 15px;
}

.icw
  .select-field
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  width: 10px;
  height: 10px;
  background: url("../img/icon/arrow-down.svg") no-repeat center center / 100%;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  transition: transform 0.3s ease-out;
}

.icw
  .select-field.option-selected
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  background: url("../img/icon/arrow-down-green.svg") no-repeat center center /
    100%;
}

.icw
  .select2-container.select2-container--open
  .select2-selection--single
  .select2-selection__arrow {
  transform: rotate(180deg) translateY(50%);
  background: url("../img/icon/arrow-down-green.svg") no-repeat center center /
    100%;
}

.icw
  .select-field
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow
  b {
  display: none;
}

.icw .radio-item {
  width: 55px;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 10px;
  background-color: var(--light-gray-1);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  z-index: 10;
}

.icw .clear-data {
  text-align: center;
  margin: 20px auto 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--green-color-3);
  background-color: white;
  border: none;
  display: block;
}

.icw .optionBox.opening,
.icw .checkbox-card.opeing {
  opacity: 0;
  transition: all 0.6s linear;
  margin-top: -10px;
}

/* .icw .optionBox,
.icw .checkbox-card, */
.icw .optionBox.showing,
.icw .checkbox-card.showing {
  margin-top: 0px;
  opacity: 1;
}

@media screen and (min-width: 450px) {

  .icw .content-wrapper {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
  }
  .icw .content-section {
    padding-bottom: 40px;
  }
}

@media screen and (min-width: 992px) {
  .icw .content-section {
    display: block;
    /* position:absolute; */
    margin-top: 0px;
    background-color: transparent;
    z-index: 10;
  }
}

@media screen and (min-width: 1024px) {
  .icw .wrapper {
    max-width: 1024px;
  }
}

@media screen and (min-width: 1025px) {
  .icw .select-field .select2-selection--single {
    height: 46px !important;
  }

  .icw .select2-selection__rendered {
    line-height: 41px !important;
  }

  .icw .normal-input {
    height: 46px;
  }
}

.icw .accordion-header,
.icw .accordion-header .accordion-button {
  font-size: 18px !important;
}

.icw .accordion-body {
  padding: 1rem 0;
}

.icw .accordion-body li {
  font-size: 16px;
}

.icw .accordion-button:focus {
  box-shadow: none;
}

.icw .accordion.content .accordion-body ul ul {
  margin: 0 0;
}