@charset "UTF-8";

.skin #chat-app {
    background-color: #FFF9FA;
}

.skin #header {
    background-color: #FFF;
}

.skin #logo {
    background-image: url(/cc/image/ym/YM_logo.png);
}

.skin #account-button-image {
    background-image: url(/cc/image/ym/account.png);
}

.skin #close-button-image {
    background-image: url(/cc/image/ym/YM_icon2.png);
}

.skin .message-name {
    color: #666;
}

.skin .message-time {
    color: #F4F5F6;
}

.skin .message-time-mine {
    color: #F4F5F6;
}

.skin .message-balloon-mine {
    background-color: #EB8DBA;
    color: #FFF;
}

.skin .message-balloon-arrow {
    background-image: url('/cc/image/ym/balloon.png');
}

.skin .message-balloon-arrow-mine {
    background-image: url('/cc/image/ym/balloon_mine.png');
    background-color: #EB8DBA;
}
.skin #close-chat-button{
    border: 1px solid #C82070;
    color:#C82070;
}
.skin .is-bot > .message-container-inner > .message-icon {
	position: absolute;
	top: 0;
	left: 0;
	width: 46px;
	height: 46px;
	background-image: url("https://faq.api.softbank.jp/images/Chat/YM/bot_0720_01.png");
	background-size: contain;
	border: 1px solid #dddddd;
	border-radius: 28px;
	background-color: #ffffff;
}

.skin .message-icon {
    background-image: url(https://faq.api.softbank.jp/images/Chat/SB/opeko.png);
}

.skin #send-message {
    background-color: #FFFFFF;
    color: #C82070;
}

.skin #send-message.noClick {
    background-color: #CCC;
	color: #ffffff;

}

.skin .button-disabled {
    background-color: #CCC !important;
    color: rgb(255, 255, 255) 	!important;
}

.skin .change-operator {
    background-color: #EB8DBA;
}

.skin .selection-button {
    background-color: #EB8DBA;
}

.skin #loading {
    background-image: url(/cc/image/ajax-loader-ym.gif);
    background-size: auto;
}

.skin .auth-type1 {
	background-color: #c93d6f;
	border-color: #c93d6f;
}

.skin .auth-type2 {
	background-color: #c93d6f;
	border-color: #c93d6f;
}

.skin .auth-cancel {
	background-color: rgb(204, 204, 204);
	border-color: rgb(204, 204, 204);
}

.button_01 {
	background-color: #EB8DBA;
}

.button_02 {
	background-color: #565656;
}

.button_03 {
	background-color: rgb(136, 35, 84);
}

.button_04 {
	background-color: #000000;
	color: #ffffff;
}

.button_05 {
	background-color: #ffffff;
	color: #000000;
}

.button_06 {
	color: #EB8DBA;
	border-color: #EB8DBA;
}

.button_07 {
	color: #006699;
	border-color: #006699;
}

.button_08 {
	width: calc(100% - 12px);
	background-color: #ffffff;
	color: #84919d;
	margin-top: 10px;
	text-align: center;
	padding: 2px 2px 2px 2px;
	cursor: pointer;
	border-style: solid;
	border-radius: 25px;
	border-color: #84919d;
	border-width: 4px;
}

.button_09 {
	background-color: #EB8DBA;
	border-color: #EB8DBA;
}

.button_10 {
	background-color: #EB8DBA;
	border-color: #EB8DBA;
}

.button_11 {
	color: #006699;
}

.button_12 {
	color: #EB8DBA;
	border-color: #EB8DBA;
}

.button_14 {
	width: calc(100% - 12px);
	border-color: #c93d6f;
	background-color: #c93d6f;
	color: #FFFFFF;
	margin-top: 10px;
	text-align: center;
	padding: 6px 6px 6px 6px;
	cursor: pointer;
	border-radius: 25px;
}

.button_15 {
	width:calc(100% - 12px);
	border-color: #e292a5;
	background-color: #e292a5;
	color: #FFFFFF;
	margin-top:10px;
	text-align:center;
	padding:6px 6px 6px 6px;
	cursor:pointer;
	border-radius: 25px;
}

.button_16 {
	width: 64px;
	height: 30px;
	background-color: #c93d6f;
	color: #FFFFFF;
	cursor: pointer;
	border-style: solid;
	border-color: #c93d6f;
	border-width: 4px;
}

.skin .carousel-header_01 {
    background-color: #EB8DBA;
}

.skin .carousel-body_01 {
    border-left: 2px solid #EB8DBA;
    border-right: 2px solid #EB8DBA;
}

.skin .carousel-footer_01 {
    color: #EB8DBA;
    border: 2px solid #EB8DBA;
}

.skin .account-info-arrow {
	right: 114px;
}

.carousel-header_02 {
	height:35px;
	background-color: #c93d6f;
	color: #FFFFFF;
	position:relative;
	font-size:14px;
	line-height:44px;
	border-radius:15px 15px 0px 0px;
	text-align:center;
	padding:10px 5px;
	font-weight:700px;
	width:auto;
}

.carousel-body_02 {
	height:100px;
	background-color: #FFFFFF;
	color: #000000;
	align-items:center;
	display:flex;
	justify-content:center;
	line-height:18px;
	border-left:2px solid #4788EE;
	padding:0px 10px;
	font-size:14px;
	width:auto;
	border-right:2px solid #4788EE;
	word-break:normal;
	border-color: #c93d6f;
}

.carousel-footer_02 {
	height:40px;
	background-color: #FFFFFF;
	color: #c93d6f;
	font-weight:700;
	text-align:center;
	align-items:center;
	display:flex;
	justify-content:center;
	cursor:pointer;
	border-radius:0px 0px 15px 15px;
	padding:10px 5px;
	font-size:14px;
	width:auto;
	border:2px solid #4788EE;
	border-top:2px solid #C0C0C0;
	position:relative;
	border-color: #c93d6f;
}