@charset "utf-8";
/*
        author : Jinwoo Park, Publisher

        info: 
           	치아정보 / 공개범위 - 공통 영역
            
        ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

        changes
        - 20210308 : initially created
    */
.tooth_info {
	display: flex;
	margin-bottom: 30px;
}

.tooth_info .fst_column {
	padding: 0;
}

.tooth_info .scd_column {
	padding-left: 11px;
}

.tooth_info label:after {
	content: '';
}

.sinus, .nerve {
	display: flex;
	justify-content: space-between;
	height: 24px;
	margin-right: 126px;
}

.nerve {
	justify-content: center;
}

.sinus span, .nerve {
	line-height: 22px;
	border-radius: 2px;
	box-shadow: 0 2px 4px 0 rgba(35, 35, 112, 0.2);
	border: 1px solid #aeaeda;
	/* border-image-source: linear-gradient(to bottom, #aeaeda, #9b9bbd); */	
	background-image: linear-gradient(to bottom, #ffffff, #e5faf9),
		linear-gradient(to bottom, #aeaeda, #9b9bbd);
	cursor: pointer;
	font-size: 13px;
	font-weight: bold;
	color: #333;
	text-align: center;
	flex-shrink: 0;
}

.sinus span:after {
	border-radius: 16px;
}

.sinus span {
	width: 46px;
	height: 100%;
}

.sinus span:nth-of-type(2) {
	flex-grow: 1;
	margin: 0 2px;
}

.tooth_num {
	display: flex;
	margin: 3px 0;
}

.tooth_num ul {
	display: flex;
	flex-wrap: wrap;
	width: 385px;
	max-width: 385px;
}

.tooth_num li {
	width: 22px;
	height: 22px;
	margin: 0 1px;
	line-height: 22px;
	border-radius: 2px;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	color: #666;
	cursor: pointer;
}

.sinus span, .tooth_num li, .nerve, .entireUp, .entireDown,
	.wrap_checkbox label {
	pointer-events: none;
}

.vod_write_popup .sinus span, .vod_write_popup .tooth_num li,
	.vod_write_popup .nerve, .vod_write_popup .entireUp, .vod_write_popup .entireDown,
	.vod_write_popup .wrap_checkbox label {
	pointer-events: auto;
}

.tooth_num li:nth-of-type(-n+16) {
	margin-bottom: 2px;
}

.tooth_num li:nth-of-type(n+17) {
	margin-top: 2px;
}

.tooth_num li:hover, .tooth_num li.selected, .tooth_num li:active {
	border-radius: 2px;
	color: #fff;
	box-shadow: 0 4px 8px 0 rgba(35, 35, 112, 0.4);
}

.sinus span:hover, .sinus span.selected, .sinus span:active, .nerve:hover,
	.nerve.selected, .nerve:active {
	color: #fff;
	box-shadow: 0 2px 4px 0 rgba(35, 35, 112, 0.2);
}

.tooth_num li:hover {
	background-color: #8d92d1;
}

.sinus span:hover, .nerve:hover {
	background-image: linear-gradient(to bottom, #8d92d1, #8d92d1);
	border-color: #6a6abf;
	/* border-image-source: linear-gradient(to bottom, #6a6abf, #7070c6); */
}

.tooth_num li.selected, .tooth_num li:active {
	background-color: #5b5bee;
}

.sinus span.selected, .sinus span:active, .nerve.selected, .nerve:active
	{
	border-color: #5b5bee;
	background-image: none;
	background-color: #5b5bee;
	/* background-image: linear-gradient(to bottom, #5b5bee, #5b5bee); */
}

.vertical_line {
	display: flex;
	border-left: 1px solid #111;
}

.horizon_line {
	width: 100%;
	background-color: #111;
}

.wrap_all_btn {
	margin-left: 10px;
}

.wrap_all_btn button {
	width: 72px;
	height: 24px;
	border-radius: 2px;
	box-shadow: 0 2px 4px 0 rgba(35, 35, 112, 0.2);
	border: 1px solid #9999c2;
	/* border-image-source: linear-gradient(to bottom, #9999c2, #a2a2cd);
	border-image-slice: 1; */
	background-image: linear-gradient(to bottom, #e1e1ed, #ddddee),
		linear-gradient(to bottom, #9999c2, #a2a2cd);
	font-size: 12px;
	font-weight: bold;
	color: #333;
}

.wrap_all_btn button:first-child {
	margin-bottom: 3px;
}

.wrap_all_btn button:hover {
	border: 1px solid #9999c2 !important;
	/* border-image-source: linear-gradient(to bottom, #9999c2, #a2a2cd)
		!important;
	border-image-slice: 1 !important; */
	background-image: linear-gradient(to bottom, #f3f3fa, #ececf6 73%, #e9e9f5),
		linear-gradient(to bottom, #a2a2cd, #9999c2);
}

.wrap_all_btn button.selected, .wrap_all_btn button:active {
	color: #fff;
	border: 0 !important;
	box-shadow: 0 2px 4px 0 rgba(35, 35, 112, 0.2);
	background-image: linear-gradient(to bottom, #5b5bee, #5b5bee)
}

.wrap_checkbox {
	display: flex;
	align-items: center;
}

.wrap_checkbox > label {
	display: flex;
	align-items: center;
	position: relative;
	margin-right: 12px;
	font-size: 14px;
	color: #333;
	cursor: pointer;
	letter-spacing: -.075em;	
}


input[type=checkbox]{
	position: absolute;
	left: -999em;
}
.checkMark{
	position: relative;
	width: 16px;
	height: 16px;
	margin-right: 4px;	
	border-radius: 2px;
	border: solid 1px #c4c4c4;	
	background-color: #fff;		
}
.checkMark:after {	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 9px;
	background: url('/images/check-w.svg') no-repeat center;
}

input[type=checkbox]:hover + .checkMark{ background-color: #f3f3f3; }
input[type=checkbox]:checked + .checkMark { 
	display: block; 
	background-color: #5b5bee; 
	border: 0;	
}
input[type=checkbox]:checked + .checkMark:after{ content: ''; }