

.chatbotHead{
	padding: 15px 40px 35px;
    background: linear-gradient(135deg, #297fdf, #5649cd);
}

.chatbotSec01{
	display: flex;
    justify-content: space-between;
}

.modelBtn{
    border-radius: 30px;
    border: none;
    background: #fff;
    color: #2b85e9;
    padding: 10px 17px;
    font-size: 15px;
    font-weight: 600;
    width: 100%;
}

.contentsSec{
	background: #f5f7fa;
	height: 61vh;
}

.sendBottomSec{
	padding: 0;
}

.sendSec{
	background: #fff;
	padding: 0 15px;
}

.msgText{
	width: 97.5%;
    border-radius: 50px;
    border: 1px solid #e3e3e3;
    height: 47px;
	padding: 10px 25px;
}

@media (max-width: 2146px) {
  .msgText {
    width: 97%;
  }
}

@media (max-width: 1809px) {
  .msgText {
    width: 96%;
  }
}

@media (max-width: 1387px) {
  .msgText {
    width: 95%;
  }
}

@media (max-width: 1135px) {
  .msgText {
    width: 94%;
  }
}

.sendBtn{
	width: 45px;
    border-radius: 50%;
    height: 45px;
    border: none;
    background: linear-gradient(135deg, #2b85e9, #3b1db7);
    color: #fff;
    padding: 0 3px 0 0;
}
.conversation{height:60vh;overflow-y:scroll;}
.contentsTxt{
	text-align: center;
    margin-top: 20px;
}

.spinner-border {
  position: absolute;
  top: 50%;
  left: 50%;
}

/* 챗봇 모델 변경 버튼 */

.wrapper {
  text-align: center;
}
#switch {
  position: absolute;
  /* hidden */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.switch_label {
    position: relative;
    cursor: pointer;
    display: inline-block;
    width: 283px;
    height: 49px;
    background: #ffffff42;
    border-radius: 40px;
    transition: 0.2s;
	padding: 12px 0;
}
.switch_label:hover {
  background: #ffffff6e;
}
.onf_btn {
  position: absolute;
  top: 3px;
  left: 3px;
  display: inline-block;
  width: 133px;
  height: 43px;
  border-radius: 30px;
  background: #ffffff;
  transition: 0.2s;
  padding: 6px 10px 5px 5px;
  color: #2b85e9;
  font-weight: 600;
  letter-spacing: -1px;
}

.nomalModel{
	position: relative;
    z-index: 99;
    margin-right: 30px;
    letter-spacing: -1px;
    font-weight: 600;
    color: #2b85e9;
}
.proModel{
	position: relative;
    z-index: 99;
    letter-spacing: -1px;
    font-weight: 600;
    color: #fff;
}


/* checking style */
#switch:checked+.switch_label {
  background: #ffffff42;
}

#switch:checked + .switch_label .nomalModel {
  color: #fff;
}

#switch:checked + .switch_label .proModel {
  color: #fff;
}

#switch:checked+.switch_label:hover {
  background: #ffffff6e;
}

/* move */
#switch:checked+.switch_label .onf_btn {
  left: 137px;
  width: 143px;
  background: #291dff;
  box-shadow: 1px 2px 3px #00000020;
}