@import url("style.css");
@import url("buttons.css");
@import url("size.css");
@import url("layout.css");
@import url("page.css");


span.depth { position:relative; display:inline-block; width:20px; height:20px; font-size:13px; font-weight:bold; line-height:20px; text-align:center; margin-right:10px; }
span.depth::before { position:absolute; content:url('/assets/images/tree.png'); top:0; left:-20px; font-size:16px; width:20px; height:20px; line-height:20px; }
span.depth1 { margin-left:20px; background:#d19b22; color:#fff; }
span.depth2 { margin-left:40px; background:#eb8a9f; color:#fff; }
span.depth3 { margin-left:60px; background:#35a23a; color:#fff; }
span.depth4 { margin-left:80px; background:#4984d9; color:#fff; }
span.depth5 { margin-left:100px; background:#d4c0f1; color:#000; }
span.depth6 { margin-left:120px; background:#ffec7f; color:#000; }

/*
span.depth::before { position:absolute; content:url('/assets/images/tree.png'); top:0; left:-20px; font-size:16px; width:20px; height:20px; line-height:20px; }
span.depth1 { margin-left:20px; background:#d19b22; color:#fff; }
span.depth2 { margin-left:40px; background:#eb8a9f; color:#fff; }
span.depth3 { margin-left:60px; background:#35a23a; color:#fff; }
span.depth4 { margin-left:80px; background:#4984d9; color:#fff; }
span.depth5 { margin-left:100px; background:#d4c0f1; color:#000; }
span.depth6 { margin-left:120px; background:#ffec7f; color:#000; }
*/



#toast-wrapper { z-index:10; position:fixed; left:0; bottom:0; width:100%; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; }


#modal-iframe-content { font-size:0; line-height:0; display:block; }
.modal-backdrop.show { opacity:0.3 !important; }
.modal-content { border:1px solid #989898 !important; }
.modal-w400 { max-width:400px !important; width:400px !important; }
.modal-w600 { max-width:600px !important; width:600px !important; }

#modal-page { display:none; }
.modal-page-header { padding:20px; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; border-bottom:1px solid #f2f2f2; }
.modal-page-header span { font-size:18px; font-weight:bold; }
.modal-page-header button { font-size:20px; line-height:20px; }
.modal-page-body { height:calc(100vh - 140px); background:#fff; overflow-x:hidden; overflow-y:auto; }
.modal-page-inner { padding:0 20px 20px 20px; }
.modal-page-footer { 
	height:80px; border-top:1px solid #f2f2f2; padding:0 20px; 
	display:flex; flex-flow:row nowrap; justify-content:flex-end; align-items:center;	
}

.frow { display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:flex-start; padding-top:10px; }
.fcol1, .fcol2 { min-height:40px; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; }
.fcol1 { width:120px; font-size:14px; font-weight:bold; }
.fcol2 { flex-grow:1; font-size:14px; padding:5px 0; }
.input-box { border:1px solid #ddd; }
.input-box input { padding:5px 0 5px 12px; border:0; background:#fff; box-shadow:none; font-size:14px; height:28px; }
.input-box span { display:inline-block; padding:0 10px; font-size:13px; line-height:28px; color:#999; }

.relation_form { display:block; }
.relation_form li { padding-top:8px; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; } 
.relation_form li input, .relation_form li button, .relation_form li select { margin-right:5px; }
.relation_form li button { padding:0 8px !important; }

.autocomp { position:relative; }
.autocomp .autobox { z-index:100; position:absolute; top:32px; left:0; width:340px; background:transparent; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:flex-start; }
.autocomp .autobox ul { width:300px; max-height:300px; overflow-x:hidden; overflow-y:auto; background:#fff; border:1px solid #b4b4b4; }
.autocomp .autobox ul li { display:block; border-bottom:1px solid #ddd; padding:10px; cursor:pointer; }
.autocomp .autobox ul li:last-child { border-bottom:0 }
.autocomp .autobox ul li:hover { background:#f2f2f2; }
.autocomp .autobox ul li div.name { font-size:14px; font-weight:bold; }
.autocomp .autobox ul li div.desc { font-size:14px; color:#777; padding-top:8px; }
.autocomp .autobox button { 
	padding:0; margin:0; border:0; box-shadow:none; cursor:pointer; text-align:center; vertical-align:middle;
	font-size:24px; line-height:37px; background:#fff; color:#555; border:1px solid #b4b4b4; border-left:0;
}
.autocomp .autobox button:hover { background:#777; color:#fff; }

#loader { 
	position:absolute; left:50%; top:50%; z-index:1; width:60px; height:60px;
	margin:-35px 0 0 -35px; border:10px solid #f3f3f3; border-top:10px solid #3498db;
	border-radius:50%; animation: spin 2s linear infinite;
}

@keyframes spin {
	0% { transform:rotate(0deg); }
	100% { transform:rotate(360deg); }
}