/* 
 * Revised By 신현진(hyunjin.shin@konantech.com)
 * Revise 2023-09-25
-------------------------------------------*/
:root {
    /* color */
    --primary-color-1: #5bace1;
    --primary-color-2: #e0832d;
    --primary-color-3: #68af3d;

    --secondary-color-1: #dc7471d;
    --secondary-color-2: #808080;
    --secondary-color-3: #f1be3f;

    --font-color-1: #222222;
    --font-color-2: #454545;
    --font-color-3: #808080;
    
    --line-color-1: #dddddd;

    /* font */
    --font-title: Noto Sans KR, 18px, semibold, #222222;
    --font-main-text: Noto Sans KR, 18px, regular, #222222, #454545;
    --font-assistant-text: Noto Sans KR, 16px, regular, #808080;


	--line-color-line: #DDD;
	--text-color-assistant: #808080;
	--text-color-text: #222;
	--text-color-text-white: #FFF;
	--text-color-text-yellow: #F1BE3F;
	--text-color-blue: #5BACE1;
	--text-color-blue-over: #1771AC;
	--background-color-btn-off: #FAFAFA;
	--background-color-btn-before: #F1BE3F;
	--background-color-btn-before-over: #C89822;
	--background-color-btn-init: #E0832D;
	--background-color-btn-init-over: #C96509;
	--background-color-btn-cancle: #454545;
	--background-color-btn-cancle-over: #454545;
	--background-color-message-bg: #454545;
	--background-color-chat-wrap: #E8F6FF;

	--etc-mouse-over: #5BACE1;
}



ul, li { list-style: none; margin: 0; padding: 0; }

.hide {
    display: none;
}

body {
    min-width: unset;
}


.chat-root.container {
	height: 100%;
	padding: 0;
}

.container-chat {
    width: 100%;
    height: 100%;
}


.container-chat {
    position: unset;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
}

.chat-root .chat-wrap {
	flex: 0 1 100%;
	max-height: calc(100% - 118px);
	height: 50%;

	position: relative; /* for shortcuts */
}

.chat-root .foot {
	flex: 1 0 content;
	max-height: 305px;
	margin: 0;
}

.chat-root .overview {
	display: none;
}
/* 
.text div {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
} */

/* HEAD */

.chat-head {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;

	flex: 0 0 70px;

	height: 70px;
	background: #FFF;
	padding: 0 24px;

	margin-bottom: 2px;
	box-shadow: 0px 2px 6px 0px #CCDAE4;
}
.chat-head svg {
	margin-top: 0;
}

.chat-head div.logo-img {
	display: inline-block;
	width: 150px;
	height: 35.199px;
	background: url(../images/logo-idolbom.png) 50% / cover no-repeat;
}

.chat-head ul {
	position: relative;
	right: 0;

	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	gap: 8px;
}
.chat-head ul li {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}
.chat-head ul li > a {
	width: 24px; 
	height: 24px;
	margin: 0;

	border-radius: 4px;
	border: 1px solid var(--line-color-line, #DDD);
	background: #FFF;

	color: var(--text-color-text, #222);
	font-family: Noto Sans KR;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: -0.2px;
	text-align: center;
}
.chat-head ul .exit-btn {
	background: url(../images/close.svg) no-repeat;
	border: 1px solid #FFF;
}


/* FONT */
/* font-basic */

.message .answer,
.message .bubble,
.message .bubble .time,
.message-box .shortcuts li,
.message li.bot div.name,
.message button,
.write-form textarea,
.chat-root .foot li,
.overview .box,
#font-panel button  {
	font-family: Noto Sans;
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	line-height: 140%;
	letter-spacing: -0.3px;
}

.font-size-70 .message .answer .box.text {
	font-size: 12px !important;
}
.font-size-80 .message .answer .box.text {
	font-size: 13px !important;
}
.font-size-90 .message .answer .box.text {
	font-size: 14px !important;
}
.font-size-100 .message .answer .box.text {
	font-size: 15px !important;
}
.font-size-110 .message .answer .box.text {
	font-size: 16px !important;
}
.font-size-120 .message .answer .box.text {
	font-size: 17px !important;
}
.font-size-130 .message .answer .box.text {
	font-size: 18px !important;
}


/* wrap */

.chat-wrap .message-box {
    height: 100%;
	overflow-y: scroll;
	background: var(--background-color-chat-wrap, #E8F6FF);
	padding: 0px 24px 0px 24px; 
}

.chat-wrap .message-box::-webkit-scrollbar {
	width: 24px;
	background-color: var(--line-color-line, #DDD);
}

.chat-wrap .message-box::-webkit-scrollbar-track {
	width: 24px;
	background-color: var(--background-color-btn-off, #FAFAFA);
}

.chat-wrap .message-box::-webkit-scrollbar-thumb {
	width: 23px;
	background-color: var(--text-color-asistant, #B0B0B0);
}

.chat-wrap .message-box ul.shortcuts {
	float: right; 
	position: absolute;
	/* top: 8px; */
	right: 48px;
	
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: baseline;
	gap: 9px;

	z-index: 100;

	width: calc(100% - 48px);
	height: 32px;
	padding: 8px 0px;
	background: var(--background-color-chat-wrap, #E8F6FF);
}

.chat-wrap .message-box ul.shortcuts > li {
	padding: 4px 8px;
	align-items: center;

	border-radius: 4px;
	border: 1px solid var(--line-color-line, #DDD);
	background: var(--background-color-box-bg, #FFF);

	color: var(--text-color-blue, #5BACE1);
	cursor: pointer;
}

.chat-wrap .message-box ul.shortcuts > li:hover {
	color: var(--text-color-blue-over, #1771AC);
}




.chat-wrap .message {
	margin: 0;
	padding: 0;
	padding-top: 48px;
	padding-bottom: 24px;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	/* gap: 48px; */
	gap: 24px;				/* TODO: CHANGE */
	align-self: stretch;

}
.chat-wrap .message > li {
	width: 100%;
}
.chat-wrap .message > li.bot {
	display: grid;
	grid-template-columns: 48px auto;
	column-gap: 8px;
	overflow-wrap: anywhere;
}
.chat-wrap .message > li.bot > .name {
	margin-bottom: 8px;
}
.chat-wrap .message li div.bubble {
	grid-column-start: 1;
	grid-column-end: 3;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	gap: 8px;
	align-self: stretch;
	
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
}


.message li div.bubble div.time {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	align-self: stretch;
	position: relative;
	right: 0px;		/* TODO: right check */
	left: 0px;

	color: var(--text-color-assistant, #808080);
	text-align: right;
}



.message li.bot img.avata {
	width: 48px;
	height: 48px;
}

.message li.bot div.name {
	height: 48px;
	margin: 0;
	padding: 0;

	color: var(--text-color-title, #222);

	font-weight: 500;
	line-height: 48px;
	text-align: left;
}


.message li.bot div.bubble .answer {
	/* TODO: CHECK width */
	width: calc(100% - 48px);
	margin: 0;
	padding: 36px 24px 24px 24px; /* TODO: 24->36 */
	border-radius: 8px;
	border: 1px solid var(--line-color-line, #DDD);
	background: var(--background-color-box-bg, #FFF);
}

.buttons .vertical {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	align-self: stretch;
}
.buttons .horizontal {
	display: grid;
	grid-template-columns: repeat(2, calc(50% - 4px));
	grid-template-rows: repeat(auto, 48px);
	gap: 8px;
}

.buttons button.btn,
.buttons button.btn:focus {
	width: 100%;
	min-height: 40px;
	height: 100%;
	margin: 0;
	flex-shrink: 0;
	border-radius: 999px;
	border: 1px solid var(--line-color-line, #DDD);
	background: var(--background-color-btn-off, #FAFAFA);
	
	color: var(--text-color-text, #222);
	text-align: center;
	font-weight: 500;
}
.buttons button.btn:hover {
	border: none;
	background: var(--text-color-blue, #5BACE1);

	color: var(--text-color-text-white, #FFF);
}

.buttons button.btn[title="초기화면"] {
	border: none;
	background: var(--background-color-btn-init, #E0832D);

	color: var(--text-color-text-white, #FFF);
}
.buttons button.btn[title="초기화면"]:hover {
	background: var(--background-color-btn-init-over, #C96509);
}

.buttons button.btn[title="이전메뉴"] {
	border: none;
	background: var(--background-color-btn-before, #F1BE3F);
	
	color: var(--text-color-text-white, #FFF);
}
.buttons button.btn[title="이전메뉴"]:hover {
	background: var(--background-color-btn-before-over, #C89822);
}
.buttons .horizontal button.btn[title="이전메뉴"] {
	background: var(--background-color-btn-cancle, #454545);
}
.buttons .horizontal button.btn[title="이전메뉴"]:hover {
	background: var(--background-color-btn-cancle-over, #454545);
}


/* USER */
.chat-wrap .message li.user {
	/* display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	flex-shrink: 0; */
}

.message li.user .answer .box.text {
	color: var(--text-color-text-white, #FFF);
}
.answer .box.text form {
	white-space: normal;
}

.message li.user .answer::before {
	content: "2";
	background-color: var(--background-color-message-bg, #454545);
    float: right;
    position: absolute;
	top: 0;
    right: 16px;
	/* width: 16px; */
	/* height: 16px; */
	width: 0;
	height: 0;
	border-top: 16px solid var(--background-color-chat-wrap, #E8F6FF);
	border-right: 16px solid transparent;
	border-bottom: 16px solid var(--background-color-chat-wrap, #E8F6FF);
	border-left: 16px solid var(--background-color-chat-wrap, #E8F6FF);
}

.message li.user .bubble .answer > .box {
	margin-top: 16px;
	padding: 8px 24px;
	border-radius: 8px;
	background: var(--background-color-message-bg, #454545);
}

.message .buttons .btn,
.message .buttons .horizontal .btn,
.message .buttons .vertical .elipsis,
.message .buttons .vertical .btn {
	margin: 0 !important;
	max-width: none !important;
	text-wrap: balance;
}


/* FOOT */

.write-form {
    position: relative;
	height: 48px;
    width: 100%;
	padding: 12px 24px 11px 24px;

	background: #FFF;
}
.write-form * {
	margin: 0;
	padding: 0;

	background: #FFF;
}
.write-form textarea {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;

	background: #FFF;
	border: none;

	color: var(--text-color-assistant, #808080);
}
.write-form span.send {
	width: 24px;
	height: 24px;
	margin: 0;
	background: url(../images/send.svg);
}


.chat-root .chat-head .tts {
    background-image: url("../img/volume_up_24dp.svg");
    margin-top: 44px;
    padding: 0;
    width: 24px;
    height: 24px;
}

.chat-root .chat-head .tts.disabled {
    background-image: url("../img/volume_off_24dp.svg");
}

.MuiAutocomplete-popper .MuiAutocomplete-paper {
    font-size: 14px;
}

.chat-root .bubble svg.more {
   /* font-size: 15px;
    width: 1em;
    height: 1em; */
	width: 16px;
	height: 14px;
	margin-top: 12px;	/* TODO: CHECK */
	margin-right: 12px;
}


.chat-root .foot > ul {
    border-radius: 5px;
    box-shadow: 0 1px 15px rgb(156 153 150 / 23%);

	/* position: absolute; */
	/* bottom: 0; */

	background: #FFF;
}

.chat-root .foot > ul > li {
	box-sizing: border-box;
    padding: 12px 24px 11px 24px;
    height: 48px;
	position: relative;

    cursor: pointer;

	color: var(--text-color-text, #222);
	text-align: center;
}

.chat-root .foot > ul > li.h-line {
	height: 16px;
	padding: 0;
}
.chat-root .foot > ul > li.h-line > span {
	position: absolute;
	top: 6px;
	display: inline-block;
	width: 20px;
	height: 4px;
	flex-shrink: 0;
	margin: 0 auto;

	border-radius: 999px;
	background: var(--background-color-btn-cancle, #454545);
}

.chat-root .foot > ul > li.disabled {
	cursor: initial;
}
.chat-root .foot > ul > li.title {
	background: var(--background-color-btn-cancle, #454545);
	color: var(--text-color-text-white, #FFF);
	border-bottom: none;

	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.chat-root .foot > ul > li:not(:last-child) {
    border-bottom: 1px solid #eeede6;
}

.chat-root .foot > ul > li:not(.disabled):hover {
    background: var(--etc-mouse-over, #5BACE1);
	color: var(--text-color-text-white, #FFF);
}

.chat-root .foot > ul > li svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    cursor: pointer;
}

.chat-root .foot > ul > li input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #e0e4ea;
    color: inherit;
    font-size: inherit;
}

.chat-root .foot > ul > li input:focus {
    outline: none;
}

.chat-root .foot > ul > li input::-webkit-input-placeholder { color: #a0a6b3; text-align: center;}
.chat-root .foot > ul > li input::-ms-input-placeholder { color: #a0a6b3; text-align: center;}
.chat-root .foot > ul > li input::placeholder { color: #a0a6b3; text-align: center;}

.chat-root .foot > ul > li.stars {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 8px;
}
.stars span.star {
	display: inline-block;
	width: 13px;
	height: 13px;
}
.stars span.star[checked] {
	background: url(../images/shining_star.svg);
}
.stars span.star[unchecked] {
	background: url(../images/star.svg);
}

/* AutoCompleter */
#konanbot_chat { position: fixed; z-index: 1; bottom: 40px; right: 20px; width: 40px; height: 40px; border: none; border-radius: 20px; background: url(../img/ico-chat4.png) 0 0 no-repeat;}
#konanbot_chat:hover { background-position: -40px 0; cursor: pointer;}
#konanbot_demo iframe {width:400px;height: 700px;max-height:calc( 100vh - 180px);float:right;bottom: 150px;position:fixed;right:0px;z-index:1; border-radius: 12px;}

#font-panel.hidden {
	display: none;
}
#font-panel {
	position: absolute;
	top: 58px;
	right: 40px;
	padding: 8px 16px;

	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	
	border: 1px solid var(--line-color-line, #DDD);
	background: #FFF;
	z-index: 998;
}
#font-panel > span {
	width: 8px;
	height: 13px;

	position: absolute;
	top: -13px;
	right: 67px;
}
#font-panel > li {
	min-width: 20px;
	min-height: 20px;
	text-align: center;
	z-index: 999;

	color: var(--text-color-text, #222);

	font-family: Noto Sans KR;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 110%; /* TODO: CHECK */
	letter-spacing: -0.32px;

	cursor: pointer;
}
#font-panel button {
	padding: 8px;
	
	border-radius: 4px;
	border: 1px solid var(--line-color-line, #DDD);
	background: #FAFAFA;

	color: var(--text-color-text, #222);

	font-family: Noto Sans KR;
	line-height: 100%;
}

/* Help */
.chat-root.help .overview {
	display: block;
	position: fixed;
	top: 0;

	width: 500px;
	height: 100%;
	background: rgba(17, 17, 17, 0.80);	
	z-index: 990;
}



.chat-root.help #font-panel {
	display: none;
}

.chat-root.help .chat-head li:not(:last-child) {
	display: inline-block;
	z-index: 999;
}
.chat-root.help .exit-btn {
	border: none;
	filter: invert(100%);
}
.chat-root.help .message-box > ul.shortcuts {
	z-index: 991;
	background: none;
}
.chat-root.help .foot {
	display: block;
	/* z-index: 998; */
}
.chat-root.help .write-form {
	/* z-index: 995; */
}

.chat-root.help .overview .box {
	display: inline-flex;
	padding: 16px;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;

	border-radius: 4px;
	border: 1px solid var(--line-color-line, #DDD);
	color: var(--text-color-text-white, #FFF);

	font-weight: 400;
}
.chat-root.help .overview .box span:first-child {
	color: var(--text-color-text-yellow, #F1BE3F);
	font-weight: 600;
}
.chat-root.help .overview > div {
	position: absolute;
}

.chat-root.help .overview .box:nth-last-child(n+4) {
	width: 240px;
}
.chat-root.help .overview .box[value="사용방법안내"] {
	top: 120px;
	right: 66px;
}
.chat-root.help .overview .box[value="글자크기설정"] {
	top: 214px;
	right: 66px;
}
.chat-root.help .overview .box[value="메뉴정보"] {
	top: 308px;
	right: 66px;
}
.chat-root.help .overview .box[value="자주하는질문답변"] {
	top: 402px;
	right: 66px;
}
.chat-root.help .overview .box[value="상담재시작"] {
	top: 496px;
	right: 66px;
}
.chat-root.help .overview .box[value="질문입력"] {
	bottom: 157px;
	left: 52px;
}
.chat-root.help .overview .box[value="대화전송"] {
	bottom: 59px;
	right: 23px;
}
.chat-root.help .overview .guide {
	height: 100%;
}
.chat-root.help .overview .guide span {
	display: block;
	position: fixed;
	width: 500px;
	bottom: 0;
	z-index: 999;
}
.chat-root.help .overview .guide span:first-child {
	top: 0;
}

@media (max-width: 767.98px) {
	.chat-root.help .overview {
		width: 100%;
		right: 0;
	}
	.chat-root.help .overview .guide span {
		right: 0;
	}
}





/* MENU */
.answer button[title="바로가기"] {
	width: 100%;
}
/* Menu: 1 depth */
.answer .box { 
	padding: 10px 0;
	position: relative;
}
.bot .answer .box { 
	padding-top: 6px;
	position: relative;
}
.answer title {
	text-align: center;
}

.answer table {
	width: 100%;
	text-align: center;
}
.answer table tr {
	border: 1px solid gray;
}

.answer strong.user {
	color: blue;
}

/* 안내센터: info-center */
.answer .info-center { 
	display: flex;
	flew-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-self: stretch;
	gap: 8px;
}
.answer .info-center > span:first-child {
	padding: 6px 8px;

	border-radius: 4px;
	background: var(--background-color-btn-cancle, #454545);

	color: var(--text-color-text-white, #FFF);

	font-family: Noto Sans;
	/* font-size: 16px; */	/* TODO: CHANGE */
	font-style: normal;
	font-weight: 600;
	line-height: 100%;
	letter-spacing: -0.32px;
}
.answer .info-center a {
	text-decoration: none;
	color: black;
}

.answer .title,
.answer .subtitle {
	text-align: center;
	font-weight: 700; /* TODO: CHECK */
	line-height: 140%;
	font-size: 1.1em;
}
/* 캐러셀 */
.CarouselItem .text {
	text-align: center;
}

.CarouselItem .text {
	margin: 0 auto;
}
.CarouselItem .buttons {
	width: 70%;
	margin: 0 auto;
}
.CarouselItem .buttons .horizontal {
	padding-top: 32px;
}
.CarouselItem .buttons button[title="바로가기"] {
	width: 60%;
	align-self: center;
}




/* SAMPLE */
.SAMPLE .list_frame li span {
	display: inline-block;
	width: 33%;
	text-align: center;
}

.SAMPLE .list_header {
	border-bottom: 2px solid gray;
	font-weight: 700;
}
.SAMPLE .list_item {
	border-bottom: 1px solid gray;
}

.SAMPLE summary {
	list-style-type: none;
}
.SAMPLE details dl,
.SAMPLE details button {
	width: 90%;
	display: block;
	margin: 0 auto;
	border: none;
}
.SAMPLE details dl>dt,
.SAMPLE details dl>dd {
	float: left;
	border-bottom: 1px solid lightgray;
}
.SAMPLE details dl>dt {
	width: 30%;
	display: inline-block;
	clear: left;
	text-align: center;
	font-weight: 700;
}
.SAMPLE details dl>dd {
	width: 68%;
	display: inline-block;
	margin-left: 4px;
}
.SAMPLE details dl>dt:nth-child(1),
.SAMPLE details dl>dd:nth-child(2) {
	font-weight: 700;
	border-top: 1px solid lightgray;
}


/* open */
.SAMPLE details[open] {
	margin-top: 6px;
	margin-bottom: 12px;
}
.SAMPLE details[open] summary {
	width: 100%;
}
.SAMPLE details[open] summary>span {
	display: none;
}
.SAMPLE details[open] summary>span:first-child {
	display: block;
	width: 100%;
	font-weight: 700;
	font-size: 1.1em;
}

/* hover */
.SAMPLE .list_item:hover {
	background-color: #e0e0e0;
}



/* 커스텀리스트 */
.bot .answer .box > div > div > ul summary {
	list-style-type: none;
	position: relative;
}

.bot .answer .box > div > div > ul * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	text-align: center;
}

.bot .answer .box > div > div > ul {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: stretch;
	gap: 6px;
}
.bot .answer .box > div > div > ul > li {
	flex: 1 1 auto;
	
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: stretch;
	
	border-bottom: 1px solid var(--line-color-line);
	cursor: pointer;
	
	/* TODO: CHANGED */
	padding: 6px 0;
}
.bot .answer .box > div > div > ul > li:first-child {
	background: var(--background-color-btn-cancle);
	color: var(--text-color-text-white);
	border-bottom: 2px solid var(--line-color-line);
	line-height: 200%;

	/* TODO: CHANGED */
	font-size: 1.05em;
	font-weight: 600;
	letter-spacing: 0.3px;
}

.bot .answer .box > div > div > ul > li dl {
	width: 100%;

	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	gap: 4px;
}
.bot .answer .box > div > div > ul > li details > dl {
	display: grid;
	grid-template-columns: 40% calc(60% - 4px);
	gap: 4px 2px;
	padding-top: 4px;
}
.bot .answer .box > div > div > ul > li button {
	/* width: 100%; */
    border: 1px solid var(--line-color-line);
    margin-top: 6px;
}
.bot .answer .box > div > div > ul > li details > button {
	width: 40%;
}

.bot .answer .box > div > div > ul > li dt,
.bot .answer .box > div > div > ul > li dd {
	width: 100%;
}
.bot .answer .box > div > div > ul > li:not(li:first-child) dt {
	border-right: 1px dashed var(--line-color-line);
}
.bot .answer .box > div > div > ul > li dd {
	/* border-right: 1px dashed blue; */
}


.bot .answer .box > div > div > ul > li:hover:not(li:first-child) {
	background: rgba(0,0,0, 0.1);
}
.bot .answer .box > div > div > ul details[open] {
	padding-bottom: 6px;
	border-left: 4px solid var(--background-color-btn-cancle);
}
.bot .answer .box > div > div > ul details[open] summary {
	color: var(--text-color-blue-over);
	font-weight: 700;
	padding-bottom: 6px;
	border-bottom: 1px dashed var(--line-color-line);
}
.bot .answer .box > div > div > ul details[open] summary + * {
	margin-top: 6px;
}

.bot .answer .box > div > div > ul summary[badge]:after {
	content: attr(badge);
	position: absolute;
	top: -2px;
    right: 0;
    background: #DC7471;
    border-radius: 16px;
    min-width: 28px;
	padding: 2px 8px;

	color: var(--text-color-text-white);
	font-weight: 700;
	font-size: 0.8em;
}

/* 2 */
.bot .answer .box .PG_CB_07_002 > li dl {
	display: grid;
	grid-template-columns: calc(30% - 2px) calc(70% - 2px);
	gap: 4px 2px;
}
.bot .answer .box .PG_CB_07_002 ol {
	padding: 0 20px;
	border-left: 12px solid #DC7471;
}
.bot .answer .box .PG_CB_07_002 ol li:first-child {
	font-weight: 700;
	letter-spacing: 0.3px;
	/* padding-bottom: 4px; */
	padding: 6px; 
	letter-spacing: 6px;
}
.bot .answer .box .PG_CB_07_002 ol li {
	text-align: left;
	padding-bottom: 2px;
	padding-right: 40px;
	border-bottom: 1px dotted var(--line-color-line);
}
.bot .answer .box .PG_CB_07_002 ol li[checked] {
	/* background: url("../images/flaticon/free-icon-check-mark-24.png") 100% 100% no-repeat; */
}
.bot .answer .box .PG_CB_07_002 ol li[checked]:after {
	content: "V";
	position: absolute;
	top: 0;
    right: 0;
    width: 40px;
    text-align: center;
    font-size: 18px;
	font-weight: 900;
	color: var(--text-color-blue);
}

/* Component */
/* Calendar */
.calendar-header h3 {
	text-align: center;
}
.calendar-body {
	margin-top: 16px;
}
.calendar input[type=radio] {
/*            appearance: none;*/
	width: 100%;
	height: 100%;
	float: left;
	z-index: 10;
	opacity: 0%;
}

.calendar li {
	position: relative;
	box-sizing: border-box;
}
.calendar li > * {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	text-align: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
}

.calendar ul {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: repeat(auto, minmax(40px, auto));
	grid-gap: 4px;
	min-height: 40px;
	place-items: center;
}

.calendar ul li {
	list-style: none;
	display: inline-block;
	width: 40px;
	height: 40px;
}
.calendar-header ul li,
.calendar li > label {
	line-height: 40px;
	border: 1px solid gray;
	border-radius: 6px;
	text-align: center;
	font-weight: 500;
}
.calendar input[type=radio]:hover + label {
	background: lightblue;
}
.calendar ul > li:nth-child(7n+1),
.calendar li > label.dayoff {
	color: red;
	font-weight: 600;
}
.calendar ul > li:nth-child(7n+1) > input:hover + label,
.calendar li > label.dayoff:hover + label {
	background: red;
	color: white;
}
.calendar ul > li:nth-child(7n) {
	color: blue;
	font-weight: 600;
}
.calendar ul > li:nth-child(7n) > input:hover + label {
	background: blue;
	color: white;
}
.calendar li > input.today + label {
	text-decoration: underline;
	font-weight: 700;
}

.calendar li input:checked + label {
/*            border: 1px solid black;*/
	font-weight: 700;
	background: orange;
	color: white;
}
.calendar li > input:disabled + label {
	color: gray;
	font-weight: 100;
}


.calendar-header ul li {
	font-weight: 600;
}
.calendar-body li > input:not(input:disabled) {
	cursor: pointer;
}
.calendar-body li:nth-child(7n+1),
.calendar-body li:nth-child(7n) {
	cursor: auto;
}

.radio-box {
    display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;        
	gap: 6px;

	margin-top: 24px;
}

.radio-box ul {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	gap: 6px;
}

.radio-box li {
	list-style: none;
}
.radio-box li > * {
	flex: 0 0 100px;
	display: inline-block;
	width: 100px;
	height: 30px;
	box-sizing: border-box;
	justify-content: center;
}
.radio-box li input[type=radio] {
	appearance: none;
	display: none;
}
.radio-box li label {
	text-align: center;
	border: 1px solid gray;
	border-radius: 12px;
	width: 90px;
	height: 35px;
	padding: 4px 6px;
	line-height: 27px;
}

.radio-box li input[type=radio]:checked + label {
	background: orange;
	color: white;
}

.radio-box li input[type=radio]:hover + label {
	background: lightblue;
	color: black;
}


form {}
form > dl { display: grid; grid-template-columns: 40% calc(60% - 20px); gap: 8px 20px; }
form > dl > * { line-height: 32px; }
form > dl > dt { padding-left: 8px; background: #333; color: white; }
form > dl > dd { display: flex; flex-direction: row; justify-content: flex-start; align-content: center; gap: 8px; margin: 0; }
form > dl > dd select.time { width: 80px; }
form > dl > dd select.service { width: 260px; }
form > dl > dd select option[disabled] { color: lightgray; }

/* BADGE COLOR */
.PG_CB_07_003 summary[badge="신청"]::after,
.PG_CB_07_003 summary[badge="대기"]::after,
.PG_CB_10_002 summary[badge="대기"]::after,
.PG_CB_10_003 summary[badge="대기"]::after,
.PG_CB_13_020_2 summary[badge="합격"]::after {
	background-color: green !important;
	color: white;
}
.PG_CB_07_003 summary[badge="완료"]::after,
.PG_CB_10_002 summary[badge="승인"]::after,
.PG_CB_10_003 summary[badge="승인"]::after,
.PG_CB_13_020_1 summary[badge="정기"]::after,
.PG_CB_13_021 summary[badge="대기"]::after {
	background-color: blue !important;
}
.PG_CB_07_003 summary[badge="반려"]::after,
.PG_CB_10_002 summary[badge="반려"]::after,
.PG_CB_10_003 summary[badge="반려"]::after,
.PG_CB_13_021 summary[badge="완료"]::after,
.PG_CB_13_020_2 summary[badge="대기"]::after {
	background-color: lightgray !important;
}
.PG_CB_07_003 summary[badge="취소요청"]::after,
.PG_CB_13_020_1 summary[badge="수시"]::after,
.PG_CB_13_020_2 summary[badge="면제"]::after {
	background-color: darkorange !important;
}
.PG_CB_07_003 summary[badge="취소"]::after {
	background-color: darkgray !important;
}
.PG_CB_07_003 summary[badge="승인"]::after {
	background-color: ##EF5050 !important;
}

/* 이용자 */
/* PG_CB_07_001 연계 돌보미 정보 */
.PG_CB_07_001 li > details > summary > dl > dt { width: 69% !important; }
/* .PG_CB_07_005 */
.PG_CB_07_005 li > details > dl {
	grid-template-columns: 32.5% calc(67.5% - 4px) !important;
}
.PG_CB_07_005 li:not(li:first-child) dl > dd:nth-child(3) {
	text-align: right !important;
}
.PG_CB_07_005 summary[mark='+'] > dl > dd:nth-child(3) {
	color: blue;
}
.PG_CB_07_005 summary[mark='-'] > dl > dd:nth-child(3) {
	color: red;
}

/* 돌보미 */
/* PG_CB_10_001 활동 수당 조회 */
.PG_CB_10_001 li > details > dl {
	grid-template-columns: 50% calc(50% - 4px) !important;
}
/* PG_CB_10_002 */
.PG_CB_10_001 details dd:nth-child(2n):not(:nth-child(n+7)) {
	text-align: right;
	padding-right: 1em;
}
.PG_CB_10_001 details > dl > dd:nth-child(4) {
	color: red;
}
.PG_CB_10_001 details > dl > dd:nth-child(6) {
	font-weight: 600;
}

/* PG_CB_10_003 근태 조회 */
.PG_CB_10_003 li > details > summary[badge]:after {
	top: 5px !important;
}

/* PG_CB_10_005 교육 이력 조회 */
.PG_CB_10_005 dl { grid-template-columns: 30% calc(70% - 4px) !important; }


/* PG_CB_13_002_1, PG_CB_13_002_2 공지사항 조회 */
.PG_CB_13_002_01 li > details > summary,
.PG_CB_13_002_02 li > details > summary {
	text-align: left;
}
.PG_CB_13_002_01 li > details > summary > div,
.PG_CB_13_002_02 li > details > summary > div {
	width: calc(100% - 70px);
	text-indent: 6px;
	height: 21px;
	overflow: hidden;
}

.PG_CB_13_002_01 li > details > summary > div.collapse:after,
.PG_CB_13_002_02 li > details > summary > div.collapse:after {
	content: "...";
    position: absolute;
    top: 0;
    right: 60px;
}

.PG_CB_13_002_01 li > details[open] > summary > div,
.PG_CB_13_002_02 li > details[open] > summary > div {
	height: auto;
}
.PG_CB_13_002_01 li > details[open] > summary > div:after,
.PG_CB_13_002_02 li > details[open] > summary > div:after {
	content: none;
}

.PG_CB_13_002_01 li > details > summary[badge="이용자/돌보미"]:after,
.PG_CB_13_002_02 li > details > summary[badge="이용자/돌보미"]:after {
	font-size: 0.5em;
}

/* PG_CB_13_020_2 지원자 조회 */
.PG_CB_13_020_2 li > details > dl {
	grid-template-columns: 30% calc(70% - 4px) !important;
}



strong.color--red {
	color: red;
}

/* 운영240319 */
.buttons .vertical button {
	white-space:normal !important;
}

@media (max-width:767px) {
	::-webkit-scrollbar {width:5px !important;}
	::-webkit-scrollbar-thumb {background-color:#b0b0b0 !important;}
	::-webkit-scrollbar-track {background-color:#fff !important;}
}