/* Generating Color Pack*/
/*
    color: '#0e58ed',
    color-2: '#e4edff',
    color-3: '#0084ff',
    color-4: '#b4c5d8',
    color-5: '#9cb7ef',
    color-6: '#e3f1fa',
    colorPoint: '#38dcff',
    cardBorder: '#dce1ed',
    cardShadow: '#E6E6E6',
    darkColor: '#1173ff'
*/

/* --color */
.color-highlight {
  color: var(--color) !important;
}

.bg-highlight {
  background-color: var(--color) !important;
  color: #FFF !important;
}

.border-highlight {
  border-color: var(--color) !important;
}

.gradient-highlight {
  background-image: linear-gradient(to bottom, var(--color-2), var(--color)) !important;
}

.footer-bar-2 .active-nav,
.footer-bar-5 strong,
.footer-bar-4 strong,
.splide__pagination__page.is-active {
  background-color: var(--color) !important;
}

.footer-bar-1 .active-nav i,
.footer-bar-1 .active-nav span,
.footer-bar-3 .active-nav i {
  color: var(--color) !important;
}

.form-floating-over > .form-control:focus ~ label {
  color: var(--color);
}

.form-floating-over > .form-control:not(:placeholder-shown) ~ label {
  color: var(--color);
}

.form-floating-over > .form-select ~ label {
  color: var(--color);
}

.color-highlight {
  color: var(--color);
}

.bg-highlight {
  background-color: var(--color);
  color: #FFF !important;
}

.interest-check input:checked ~ label {
  color: #FFF !important;
  background-color: var(--color) !important;
}

/* --color-2 */

.bg-subHighlight{
  background-color: var(--color-2) !important;
}

.color-subHighlight {
  color: var(--color-2) !important;
}

/* --color-3 */
.bg-third{
  background-color: var(--color-3) !important;
}

.color-third{
  color: var(--color-3) !important;
}

/* --color-point */
.bg-third{
  background-color: var(--color-point) !important;
}

.color-point{
    color: var(--color-point) !important;
}

/* ect */
.card-border{
  border-color: var(--color-card-border) !important;
}

/* -------------------------  loading con -------------------------  */
.sk-cube-grid .sk-cube {
  background-color: var(--color) !important;
}

/* -------------------------  토글 버튼 -------------------------  */
.ios-input:checked ~ .custom-control-label::before {
  background-color: var(--color) !important;
  opacity: 0.7;
}
.ios-switch-icon label::before {
  background-color: var(--color) !important;
}

/* ------------------------- 체크박스 커스텀 버튼 ------------------------- */
.checkBox-btn input[type="checkbox"]+label{background: #fff; border:1px solid var(--color); color: var(--color);} /* 버튼 기본 스타일 */
.checkBox-btn input[type="checkbox"]:checked + label::after{background: var(--color); color: #fff;}/* 버튼 체크 됐을 때 */
.checkBox-btn input[type="checkbox"]:disabled + label{background: #fff; border:1px solid #a3b89d; color: #a3b89d;}/* 버튼 disabled 됐을 때 */
.insu-btn.active{border: 1px solid var(--color); opacity: 1;}

/* ------------------------- 라디오박스 커스텀 버튼 ------------------------- */
.radioBox-btn input[type="radio"]+label{background: #fff; border:1px solid var(--color); color: var(--color);} /* 버튼 기본 스타일 */
.radioBox-btn input[type="radio"]:checked + label{background: var(--color); color: #fff;}/* 버튼 체크 됐을 때 */

/* -------------------------  tab -------------------------  */
.bg-highlight-tab01 {
  background-color: var(--color) !important;
  color: #fff !important;
}