@charset "utf-8";
body{
font-family: 'Kosugi Maru', sans-serif;
font-family: 'M PLUS 1p', sans-serif;
font-family: 'Zen Kaku Gothic New', sans-serif;
}

/*LINE 入力枠 */
button, input, em{
	vertical-align: -webkit-baseline-middle;
}
input[type="text"]{
	margin-right: 3px;
}
.emoji{
	width: 100%;
	height: 150px;
	overflow:auto;
	border: 1px solid;
	margin-top: 8px;
	margin-bottom: 8px;
}
.emoji img{
 	width: 24px;	
}

.input_div {
	padding: 10px;
	float:left;
	width: 345px;
}
	
.input_div .input_area {
	margin: 1em;
	padding: 10px;
	border: 2px #eeeeee solid;
	width: 75%;
}
.input_div .input_area textarea {
	width: 100%;
}

.preview_div {
	padding: 10px;
	float: left;
	width: 30%;
}

.preview_div .input_area {
	margin: 1em;
	padding: 10px;
	border: 2px #eeeeee solid;
	width: 231px;
	height: 526px;
	overflow: auto;
}

.div_margin {
	margin-left: 0;
	margin-right: 0;
}

.button_defult {
	margin-left: 0;
	background: #ffa722;
	padding: 13px 24px;	
    cursor: pointer;
	font-size: 18px;
    font-weight: bold;	
	color: white;
}

.clearfix:after{
	content: "";
	clear: both;
	display: block;
}

.browserback{
	background: #ffa722;
    padding: 3px 10px;
    color: white;	
	cursor: pointer;
}
span.tag_span{
	padding: 2px 8px;
    background-color: #ffa722;
    color: white;
    border-radius: 10px;	
}

.botgroupbtn {
	margin-left: 10px;
	padding: 3px 10px;
	border: solid 1px #eeeeee;
	/* background: white; */
	color: #00a65a;
	font-weight: bold;
}

.btn {
	border-radius: 0px !important;
}

hr.action_hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #00cc33;
}

.option_bot_check {
	border-radius: 50%;
	opacity: 0.4;
	margin-right:3px;
	cursor:pointer;
}

.option_bot_check_active {
	border-radius: 50%;
	opacity: 1.0;
	margin-right:3px;
	cursor:pointer;
}

.option_label {
	padding: 6px 15px;
	background-color: #ffa722;
	color: white;	
	cursor:pointer;
}

span.selectbot{
	padding: 10px 15px 15px 10px;
	border: 2px solid #ffa722;
	background: white;	
}

/* ____________________________________loading____________________________________ */
#loader_ani {
	width: 80px; /*ローディングアイコンの横サイズ*/
    height: 80px; /*ローディングアイコンの縦サイズ*/
    /*border-radius: 100%;  /*CSS3で円を書く*/
    /*border: 15px solid #fff;  /*円に○の白枠をつける*/
    /*border-right-color: transparent; /*円の右にC状の空きをつける*/
    /*animation: spin 1s linear infinite; /*1秒毎にくるくる回転するアニメーション*/	 
}

#loader_layer {
  display: table;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  opacity: 0.8;
  z-index: 20000;/*remodal window(z-index:10000)よりさらに優先するため */
}
@keyframes spin
{
    0% { transform: rotate(0deg);   opacity: 0.2; } /*0%の時は20％の透明度*/
    50%  { transform: rotate(180deg); opacity: 1.0; } /*50%の時は透明度なし*/
    100%   { transform: rotate(360deg); opacity: 0.2; } /*100%の時に20％の透明度に戻る*/
 
}
.centerMiddle{
    margin: 0px 0px 0px 0px;  /*縦横半分をネガティブマージンでずらす*/
    position: absolute;     /*body要素に対して絶対配置*/
    top: 40%;       /*上端を中央に*/
    left: 50%;      /*左端を中央に*/
    width: 80px;   /*横幅*/
    height: 80px;  /*縦幅*/
}

.mac .centerMiddle{
    margin: 0px 0px 0px 0px;  /*縦横半分をネガティブマージンでずらす*/
    position: absolute;     /*body要素に対して絶対配置*/
    top: 45%;       /*上端を中央に*/
    left: 50%;      /*左端を中央に*/
    width: 80px;   /*横幅*/
    height: 80px;  /*縦幅*/
}

/* bootstrap override */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    color: #fff !important;
    cursor: default;
    background-color: #ffa722 !important;
    border: 1px solid #ffa722;
    border-bottom-color: transparent;
}

.nav-tabs > li.active {
    margin-top: -2px;
    background-color: #ffa722 !important;
}