/**
 * 이 파일은 iModule 모임즈모듈의 일부입니다. (https://www.moimz.com)
 *
 * MoimzTools 설치화면 스타일시트
 * 
 * @file /modules/moimz/styles/install.css
 * @author Arzz (arzz@arzz.com)
 * @license MIT License
 * @version 3.0.0
 * @modified 2018. 8. 26.
 */
@import url("OpenSans.css");

* {padding:0px; margin:0px;}
html, body {overflow-x:hidden; overflow-y:auto;}
body {font-family:OpenSans; background:url(../images/install/bg.png); background-size:cover;}
input, button {font-family:inherit;}

div[data-role=disabled] {width:100%; height:100%; position:absolute; top:0; left:0; z-index:1000; color:#fff; background:rgba(0,0,0,0.5); text-align:center; font-weight:300; font-size:15px;}

header {height:50px; padding:0px 10px; line-height:50px; background:url(../images/emblem.png) no-repeat 10px 50%; background-size:30px 30px; padding-left:50px;}
header > h1 {display:inline-block; font-size:20px; font-weight:bold; color:rgba(255,255,255,0.9); text-shadow:1px 1px 2px rgba(0,0,0,0.3);}
header > h1 > small {font-size:14px; font-weight:300; color:rgba(255,255,255,0.6);}

main {width:700px; margin:0 auto; padding:50px 0px;}
main > section {padding:20px; background:#f2f2f2; border-radius:10px; box-shadow:1px 1px 5px rgba(0,0,0,0.5); box-sizing:border-box;}

main > section > article {padding:5px;}
main > section > article > h2 {height:40px; line-height:45px; font-size:24px; color:#666; text-shadow:1px 1px 1px rgba(255,255,255,0); font-weight:normal; background-repeat:no-repeat; background-size:contain; background-position:0 50%; margin-left:-5px; padding-left:50px; margin-bottom:10px;}
main > section > article > h2 > small {font-size:16px; color:#929292; text-shadow:1px 1px 1px rgba(255,255,255,0);}

main > section > article > article[data-step] {display:none;}
main > section > article > article[data-step=license] > p {display:block; height:250px; overflow-x:hidden; overflow-y:auto; line-height:1.8; font-size:13px; box-sizing:border-box; padding:10px; border:1px solid #ccc; background:#fff;}
main > section > article > article[data-step=license] > label {height:50px; line-height:50px; font-size:13px; cursor:pointer;}
main > section > article > article[data-step=license] > label > input {vertical-align:middle;}

main > section > article > article[data-step=check]:after {content:""; clear:both; display:block;}
main > section > article > article[data-step=check] > ul {list-style:none;}
main > section > article > article[data-step=check] > ul > li {height:30px; line-height:30px; font-size:13px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
main > section > article > article[data-step=check] > ul > li > .version {font-weight:bold; color:#df2933;}
main > section > article > article[data-step=check] > ul > li > .directory {font-weight:bold;}
main > section > article > article[data-step=check] > ul > li > .permission {font-weight:bold; color:#df2933;}
main > section > article > article[data-step=check] > ul > li > .mi {font-size:15px; margin-right:5px;}
main > section > article > article[data-step=check] > ul > li > .mi-ok-circle {color:#2980b9;}
main > section > article > article[data-step=check] > ul > li > .mi-cancel-circle {color:#df2933;}
main > section > article > article[data-step=check] > ul > li > .mi-attention {color:#ffae00;}
main > section > article > article[data-step=check] > button {display:inline-block; height:24px; border:0px; background:transparent; cursor:pointer; color:#747474; float:right;}
main > section > article > article[data-step=check] > button > i {font-size:12px; width:18px; height:18px; line-height:18px !important; border:2px solid #747474; border-radius:50%; text-align:center; margin:0px 5px; vertical-align:middle; box-shadow:1px 1px 1px rgba(255,255,255,1);}
main > section > article > article[data-step=check] > button > span {display:inline-block; height:22px; line-height:22px; vertical-align:middle; font-size:13px; font-weight:400; text-shadow:1px 1px 1px rgba(255,255,255,1);}
main > section > article > article[data-step=check] > button:hover {color:#0080ff;}
main > section > article > article[data-step=check] > button:hover > i {border-color:#0080ff;}

main > section > article > article[data-step=insert] div[data-role=input] {margin:10px 0px; font-size:0px;}
main > section > article > article[data-step=insert] div[data-role=input] > label {font-size:13px; display:inline-block; width:150px; height:30px; line-height:30px; vertical-align:top;}
main > section > article > article[data-step=insert] div[data-role=input] > input {width:calc(100% - 150px) !important;}
main > section > article > article[data-step=insert] div[data-role=input] > div.helpBlock {color:#666; font-size:12px; padding:5px 0px 5px 150px;}
main > section > article > article[data-step=complete] > h3 {text-align:center; margin:30px 0px; font-size:18px; color:#222;}
main > section > article > article[data-step=complete] > p {text-align:center; margin:30px 0px; font-size:13px; color:#666; line-height:1.6;}

main > section > nav {height:30px; font-size:0px; text-align:center;}
main > section > nav > ul {display:inline-block; height:30px; list-style:none;}
main > section > nav > ul > li {display:inline-block; margin:11px 2px; width:8px; height:8px; border-radius:4px; background:#999; box-shadow:1px 1px 1px rgba(0,0,0,0.3);}
main > section > nav > ul > li.on {background:#df2933;}
main > section > nav > button {height:30px; border:0px; background:transparent; cursor:pointer; color:#747474;}
main > section > nav > button > i {font-size:12px; width:24px; height:24px; line-height:24px !important; border:2px solid #747474; border-radius:50%; text-align:center; margin:0px 5px; vertical-align:middle; box-shadow:1px 1px 1px rgba(255,255,255,1);}
main > section > nav > button > span {display:inline-block; height:28px; line-height:28px; vertical-align:middle; font-size:15px; font-weight:400; text-shadow:1px 1px 1px rgba(255,255,255,1);}
main > section > nav > button:hover {color:#0080ff;}
main > section > nav > button:hover > i {border-color:#0080ff;}
main > section > nav > button[disabled] {color:#ccc !important; cursor:not-allowed;}
main > section > nav > button[disabled] > i {border-color:#ccc !important;}
main > section > nav > button[type=button] {float:left;}
main > section > nav > button[type=submit] {float:right;}

.inputControl {width:100%; height:30px; padding:2px 5px; font-size:12px; line-height:1.5; border-radius:3px; border:1px solid #ccc; vertical-align:middle; color:#555; background-color:#ffffff; box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; box-sizing:border-box;}
.inputControl:focus {border-color:#66afe9; outline:0; box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);}
.inputControl[disabled] {cursor:not-allowed; background-color:#eee;}
.inputControl:-moz-placeholder {color:#999;}
.inputControl::-moz-placeholder {color:#999;}
.inputControl:-ms-input-placeholder {color:#999;}
.inputControl::-webkit-input-placeholder {color:#999;}

.selectControl {display:inline-block; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none; position:relative; width:100%; height:30px;}
.selectControl button {display:inline-block; padding:3px 10px 3px 10px; margin-bottom:0; font-size:12px; font-weight:bold; line-height:1.5; text-align:left; vertical-align:middle; cursor:pointer; border:1px solid transparent; border-radius:3px; white-space:nowrap; text-decoration:none !important; color:#333333; background-color:#ffffff; border-color:#ccc; box-sizing:border-box; width:100%; height:30px; overflow:hidden; text-overflow:ellipsis;}
.selectControl button:hover {color:#333333; background-color:#ebebeb; border-color:#adadad;}
.selectControl button:focus, .selectControl button:active {border-color:#66afe9; outline:0; box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);}
.selectControl button[disabled] {cursor:not-allowed; background-color:#eee;}
.selectControl button[disabled]:hover {background-color:#eee; border-color:#ccc;}
.selectControl .arrow {display:inline-block; width:0; height:0; margin-left:2px; vertical-align:middle; border-top:4px solid #000000; border-right:4px solid transparent; border-bottom:0 dotted; border-left:4px solid transparent; content:""; position:absolute; top:13px; right:10px;}
.selectControl ul {display:none; box-sizing:border-box; width:100%; position:absolute; top:28px; left:0; z-index:1000; float:left; min-width:60px; padding:4px 0; margin:2px 0 0; font-size:12px; list-style:none; background-color:#ffffff; border:1px solid #66afe9; border-radius:0px 0px 3px 3px; background-clip:padding-box; max-height:202px; overflow-y:auto; overflow:auto; border-top:0px;}
.selectControl ul .divider {height:1px; margin:5px 0; overflow:hidden; background-color:#e5e5e5 !important; padding:0px !important;}
.selectControl ul li {display:block; padding:3px 10px; clear:both; font-weight:normal; color:#333333; white-space:nowrap; cursor:pointer; overflow:hidden; text-overflow:ellipsis; height:18px; line-height:18px;}
.selectControl ul li:hover, .selectControl ul li:focus {outline:0; color:#ffffff !important; text-decoration:none; background-color:#428bca;}
.selectControl ul li:hover span, .selectControl ul li:focus span {outline:0; color:#ffffff !important; text-decoration:none; background-color:#428bca;}
.selectControlExtend ul {display:block; z-index:1000;}
.selectControlExtend button {background:#fff !important; border-color:#66afe9; outline:0; box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); border-radius:3px 3px 0px 0px;}
.selectControlExtend button .arrow {display:inline-block; width:0; height:0; margin-left:2px; vertical-align:middle; border-bottom:4px solid #000000; border-right:4px solid transparent; border-top:0 dotted; border-left:4px solid transparent; content:""; position:absolute; top:13px; right:10px; color:red;}

.selectControl[data-field=language] {position:absolute; top:10px; right:10px; width:150px;}
.selectControl[data-field=language] > ul > li {font-family:OpenSans, sans-serif;}

.helpBlock:empty {display:none;}

.hasError .inputControl, .hasError .textareaControl, .hasError .selectControl button {border-color:#b94a48; box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);}
.hasError .inputControl:focus, .hasError .textareaControl:focus, .hasError .selectControl button:focus {border-color:#953b39; box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;}
.hasError .helpBlock {color:#b94a48 !important;}


/**
 * Moimz Fonts
 *
 * @license MIT
 * @version 1.0.0
 */
@font-face {font-family:"moimz"; src:url("../fonts/moimz.woff2") format("woff2"), url("../fonts/moimz.woff") format("woff"), url("../fonts/moimz.ttf") format("truetype"), url("../fonts/moimz.svg") format("svg"); font-weight:normal; font-style:normal}

.mi {display:inline-block; font-style:normal; font-family:moimz; font-size:inherit; text-rendering:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
.mi-loading {-webkit-animation:mi-loading 2s infinite linear; animation:mi-loading 2s infinite linear}
@-webkit-keyframes mi-loading {
	0% {-webkit-transform:rotate(0deg); transform:rotate(0deg)}
	100% {-webkit-transform:rotate(359deg); transform:rotate(359deg)}
}
@keyframes mi-loading {
	0% {-webkit-transform:rotate(0deg); transform:rotate(0deg)}
	100%{-webkit-transform:rotate(359deg); transform:rotate(359deg)}
}
.mi-moimz:before {content:"\e800"}
.mi-back:before {content:"\e900"}
.mi-back-bold:before {content:"\e901"}
.mi-go:before {content:"\e902"}
.mi-go-bold:before {content:"\e903"}
.mi-left:before {content:"\e904"}
.mi-up:before {content:"\e905"}
.mi-down:before {content:"\e906"}
.mi-right:before {content:"\e907"}
.mi-angle-left:before {content:"\e908"}
.mi-angle-up:before {content:"\e909"}
.mi-angle-down:before {content:"\e910"}
.mi-angle-right:before {content:"\e911"}
.mi-ok:before {content:"\ea00"}
.mi-ok-circle:before {content:"\ea01"}
.mi-ok-circle-o:before {content:"\ea02"}
.mi-cancel:before {content:"\ea03"}
.mi-cancel-circle:before {content:"\ea04"}
.mi-cancel-circle-o:before {content:"\ea05"}
.mi-question:before {content:"\ea06"}
.mi-question-circle:before {content:"\ea07"}
.mi-question-circle-o:before {content:"\ea08"}
.mi-attention:before {content:"\ea09"}
.mi-attention-o:before {content:"\ea10"}
.mi-attention-circle:before {content:"\ea11"}
.mi-attention-circle-o:before {content:"\ea12"}
.mi-info:before {content:"\ea13"}
.mi-info-circle:before {content:"\ea14"}
.mi-info-circle-o:before {content:"\ea15"}
.mi-plus:before {content:"\eb00"}
.mi-minus:before {content:"\eb01"}
.mi-denied:before {content:"\eb02"}
.mi-close:before {content:"\eb03"}
.mi-close-bold:before {content:"\eb04"}
.mi-refresh:before {content:"\eb05"}
.mi-refresh-bold:before {content:"\eb06"}
.mi-add:before {content:"\eb07"}
.mi-remove:before {content:"\eb08"}
.mi-search:before {content:"\eb09"}
.mi-check:before {content:"\eb10"}
.mi-user:before {content:"\ec00"}
.mi-group:before {content:"\ec01"}
.mi-home:before {content:"\ec02"}
.mi-profile:before {content:"\ec03"}
.mi-lock:before {content:"\ec04"}
.mi-star:before {content:"\ec05"}
.mi-star-half:before {content:"\ec06"}
.mi-star-empty:before {content:"\ec07"}
.mi-heart:before {content:"\ec08"}
.mi-heart-empty:before {content:"\ec09"}
.mi-upload:before {content:"\ec10"}
.mi-download:before {content:"\ec11"}
.mi-calendar:before {content:"\ec12"}
.mi-time:before {content:"\ec13"}
.mi-loading:before {content:"\ed00"}