@charset "UTF-8";

input[type="sns_send"] {
 border: 0;
 box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
}
input[type="sns_send"]:focus {
 box-shadow: 0 0 5px 0 rgba(255,153,0,1);
 background-color:lightcyan;
 outline: 0;
}

#sns_form{
 padding: 5px;
 border-bottom:1px;
 border-color:silver;
 background-color: aliceblue;
}

.sns_tbl, td, th{
 border: 1px #AAA solid;
}

.sns_tbl{
 table-layout: fixed;
 border: 2px #444 solid;
 width: calc(100% - 10px);
 margin: 5px;
 font-size:12px;
}

#sns_form #sns_msg{
 margin-top: 3px;
 margin-left: 5px;
 height: 32px;
 border-radius:10px;
 width:calc(100% - 96px);
 font-size: 16px;
 vertical-align: top;
 padding-left:10px;
}

#sns_form .sns_pict{
 margin-left: 10px;
 cursor: pointer;
}

#sns_btn {
  display       : inline-block;
  border-radius : 5%;
  font-size     : 14pt;
  text-align    : center;
  cursor        : pointer;
  padding       : 8px 12px;
  margin-left: 5px;
  background    : #000066;
  color         : #ffffff;
  line-height   : 1em;
  transition    : .3s;
  box-shadow    : 5px 5px 19px #444;
  border        : 2px solid #000066;
}
#sns_btn:hover {
  box-shadow    : none; 
  color         : #000066;
  background    : #ffffff;
}

.sns_container {
  padding: 0;
  background: #ffffff;
  max-width: 400px;
  font-size: 1em;
  border: solid 1px #eeeeee;
}

.sns_container a {
  color: #58aeed;
}

/* タイトル部分 */
.sns_container .sns_title {
 background: #383838;
 padding: 2px 10px;
 font-size: 10pt;
 color: #ffffff;
}

/* タイムライン部分 */
.sns_container .sns_contents {
  overflow: hidden;
  position: relative;
  line-height: 135%;
}

.sns_container #sns_reps {
	max-height: calc(35vh);
	overflow-x: hidden;
	overflow-y: auto;
	margin-bottom: 4px;
}

.sns_container .sns_block {
  width: 100%;
  display: block;
  padding: 3px;
  padding-bottom:7px;
  border-bottom: solid 1px #eeeeee;
  overflow: hidden;
}

.sns_btn{
 font-size: 14px;
 line-height: 28px;
 cursor: pointer;
 pointer-events: all;
 padding: 3px 10px;
 color: #0d7796;
 transition: 0.2s;
 margin-left:3px;
}

.sns_btn:hover {
 box-shadow: 5px 5px 19px #444;
 color: #fff;
 background-color: #0d7796;
 border-radius:3px;
}

.sns_container .sns_block figure {
  width: 45px;
  padding: 0;
  margin: 0;
  float: left;
}

.sns_container .sns_block figure img {
  border-radius: 50%;
  width: 36px;
  height: 36px;
}

.sns_container .sns_block-text {
 margin: 0;
 position: relative;
 margin-top:4px;
 font-size: 1.1em;
 font-weight: bold;
 color: #428bca;
}

.sns_container .sns_block-title {
  margin: 0;
  position: relative;
  margin-left: 45px;
  padding-right: 10px;
}

.sns_container .sns_block-title .name {
  font-weight: bold;
  font-size: 1.4em;
}

.sns_container .sns_block-title .name .name_reply {
  color: #8a9aa4;
  margin-left: 10px;
}

.sns_container .sns_block-title .date {
  color: #8a9aa4;
}

.sns_block.active {
    background-color: #d3831569;
}

.in-pict img {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  width: 98%;
  height: 200px;
  object-fit: cover;
 cursor:pointer;
}

.sns_container .sns_block .in-pict img {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  width: 98%;
  height: 200px;
  object-fit: cover;
 cursor:pointer;
}

.aplLink:hover {
 color: #0077bf;
 font-weight:900;
}

.in-pict-btn{
 position:absolute;
 cursor:pointer;
 top: 20px;
 font-size: 12px;
 color: cadetblue;
}

.sns_note{
 max-height: 350px;
 height: auto !important;
 padding-left:6px;
 overflow-y: auto;
}

.sns_container .sns_icon br{
  display: none;
}

.sns-edit {
	padding: 0 6px;
	border-radius: 5px;
	color: black;
	height:20px;
	font-size: 13px;
	margin-right: 4px;
}

.sns_edit2 {
 padding:0 6px;
 border-radius:5px;
 color:black;
 height:22px;
 width:70%;
 margin-left:3px;
}

.sns_btn2 {
 font-size: 14px;
 cursor: pointer;
 pointer-events: all;
 padding: 0px 10px;
 color: #0d7796;
 transition: 0.2s;
 margin-left: 3px;
 border-radius: 5px;
}
.sns_btn2:hover {
 box-shadow: 5px 5px 19px #444;
 color: #fff;
 background-color: #0d7796;
 border-radius:3px;
}
.sns_pct {
	object-fit: contain;
	width: 95%;
	margin: 2.5%;
	filter: drop-shadow(10px 10px 15px rgba(0, 0, 0,79%));
}
.sns_hint{
	color: aquamarine;
	margin: 8px;
}

#iframe_container{
	background-color: #000000a6;
	left:0;
	right:0;
	top:0;
	bottom:0;
	padding-left: 20px;
	padding-top: 20px;
    position: absolute;
    overflow: hidden;
	z-index: 100000;
}

#iframe_close{
	position: fixed;
	right: 6px;
	top: 6px;
}

#iframe_box{
	scale: 0;
	background-color: white;
	border: none;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	padding: 4px;
	border-radius: 12px;
	transition: 0.3s;
}

#iframe_treebox{
	position:absolute;
	width: 220px;
	height: auto;
	float: left;
}

#iframe_tree_tool{
	background-color: #333;
	color: white;
	font-size: 15px;
	padding: 6px 0 8px 12px;
	border-radius: 10px 0 0;
}

#iframe_tree{
	font-size: 14px;
	line-height:14px;
	overflow: auto;
	padding: 4px 0 0 7px;
	height:30vh;
	user-select: none;
	border-radius: 0 0 15px 0;
}

#iframe_dl{
	background-color: white;
	border: none;
	width:100%;
	height: 100%;
	padding: 4px;
	border-radius: 0 10px 10px 0;
	transition: 0.3s;
}

#iframe_progbar {
	transition: width 0.1s linear;
	user-select: none;
}

#iframe_note{
	position: absolute;
	margin: 10px 15px;
	font-style: italic;
	user-select: none;
}

#iframe_loading{
	text-align: center;
	color: white;
	font-size: 26px;
	position: fixed;
	padding: 25% calc(50% - 50px);
	font-family: serif;
	width:100%;
	height:100%;
	z-index: 1;
}

#iframe_handle{
	position: relative;
	float: right;
	right: -90px;
	top: 20px;
	background: black;
	cursor: pointer;
}

#iframe_text{
	position: absolute;
	font-size: 18px;
	font-weight: bold;
	background: rgba(127, 255, 212, 0.64);
	border-radius: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
}
#iframe_cm_btn{
	position: absolute;
	bottom: 10px;
	right: 10px;
	padding: 4px 15px;
}

.filetree-container{
	overflow: auto;
	height: calc(30vh - 32px);
	max-height: 125px;
}

.filetree{
	width: 100%;
	position: flex;
	padding: 0 0 8px 6px;
	height: auto;
	background-color: white;
	user-select: none;
}

.filetree span.pdf { background: url(../images/icon/pdf.svg) 0 0 no-repeat; background-size: 18px; white-space: nowrap;}
.filetree span.ppt { background: url(../images/icon/ppt.svg) 0 0 no-repeat; background-size: 18px; white-space: nowrap;}
.filetree span.xls { background: url(../images/icon/xls.svg) 0 0 no-repeat; background-size: 18px; white-space: nowrap;}
.filetree span.doc { background: url(../images/icon/doc.svg) 0 0 no-repeat; background-size: 18px; white-space: nowrap;}
.filetree span.mov { background: url(../images/icon/mov.svg) 0 0 no-repeat; background-size: 18px; white-space: nowrap;}
.filetree span.img { background: url(../images/icon/img.svg) 0 0 no-repeat; background-size: 18px; white-space: nowrap;}
.filetree span.selected{background-color: lightblue;}
.filetree span.file.target {font-weight: bold; color: #c21d1d;}


.chart {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 60px;
	text-align: center;
}
.chart canvas {
	position: absolute;
	top: 0;
	left: 0;
}
.percent {
	display: inline-block;
	line-height: 60px;
	font-size: 18px;
	z-index: 2;
}
.percent:after {
	content: '%';
	margin-left: 0.1em;
	font-size: .8em;
}
label.disabled{
	color: #ccc;
}