/*!
* My local styles for ISS (Instructor Support Site)
* Copyright (C) 2023 Top Out Human Capital Inc.
*/

/*--------------- 開催場所  教室、オンライン、ハイブリット ------------*/
.iss-text-classroom {
    background-color: paleturquoise;
}

.iss-text-online {
    background-color: gold;
}

.iss-text-hybrid-class {
    background-color: palegreen;
}

/*--------------- 形態(Type) ------------*/
/* 定期開催 */
.iss-text-type-c {
    background-color: skyblue;
}

/* 一社向け */
.iss-text-type-n {
    background-color: plum;    
}

/*------------ 出欠リストでの、出席、一部出席、欠席 表示 ------------*/
.iss-text-attended {
    background-color: lightgreen;
}

.iss-text-partly-attended {
    background-color: khaki;
}

.iss-text-absent {
    background-color: lightpink;
}

.iss-text-null {
    color: gray;
}


/*------------ ボタンのカスタマイズ 影をつけて、押したときにへこませる ------------*/

.btn {
    box-shadow: 4px 4px 0 0 #888; /* 右に5px・下に5px・灰色の影を表示 */
}

.btn:hover {
    box-shadow: 5px 5px 0 0 #000; /* 右に6px・下に6px・黒色の影を表示 */
}

.btn:active {
  box-shadow: 1px 1px 0 0 #000;
  position: relative;
  top: 4px;
  left: 4px;
}

/*------------ 点滅 ------------*/
.blink {
    animation-name: blinking; /*アニメーション名*/
    animation-duration: 0.7s; /*アニメーション1回分の時間の長さ*/
    animation-timing-function: ease-in-out;/*アニメーションの動き方*/
    animation-delay: 0s;/*アニメーションの開始時間*/
    animation-iteration-count: infinite;/*繰り返す回数*/
    animation-direction: alternate;/*反転再生するかどうか*/
}

@keyframes blinking {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/*------------ summary/detail ------------*/
.summary {
    /* display: block; */ /*デフォルトの三角形を削除*/
    cursor: pointer;
    padding: 5px;
    background-color: lightgray;
}
.summary::-webkit-details-marker {
    /* Safari-デフォルトの三角形を削除*/
    /* display: none; */
    background-color: gray;
}


/*------------ Event Check Box ------------*/
.iss-event-chkbox {
	margin:			0 0 10px 20px;
}
/* ラベルのスタイル　*/
.iss-event-chkbox label {
	padding-left:	32px;			/* ラベルの位置 */
	font-size:		20px;
	line-height:	24px;
	display:		inline-block;
	cursor:			pointer;
	position:		relative;
}

/* ボックスのスタイル */
.iss-event-chkbox label:before {
	content:		'';
	width:			24px;			/* ボックスの横幅 */
	height:			24px;			/* ボックスの縦幅 */
	display:		inline-block;
	position:		absolute;
	left:			0;
	background-color:	#fff;
	box-shadow:		inset 1px 2px 3px 0px #000;
	border-radius:		6px 6px 6px 6px;
}
/* 元のチェックボックスを表示しない */
.iss-event-chkbox input[type=checkbox] {
	display:		none;
}
/* チェックした時のスタイル */
.iss-event-chkbox input[type=checkbox]:checked + label:before {
	content:		'\2713';		/* チェックの文字 */ 
	font-size:		26px;			/* チェックのサイズ */
	color:			#fff;			/* チェックの色 */
	background-color:	#06f;			/* チェックした時の色 */
}