.wrap
{
	width: 1400px;
	overflow:hidden;
	margin:0 auto;
}
.wrap .wrapKeyboard
{
	width:100%;
}
.wrapUser
{
	width: 1000px;
	overflow:hidden;
	margin:0 auto;
}
.wrapUser .wrapKeyboard
{
	width:1000px;
}
.wrap .optionWrap
{
	width:100%;
	float:left;
	margin:10px 0px;
	text-align:center;
}
.optBox
{
	border:1px solid;
	padding:5px;
}
#mainDiv108 {
	width:950px;
	margin:0 auto;
	padding:0px;
	background-color:#FFFFFF;
	text-align:left;
	overflow:hidden;
}
#mainDiv104 {
	width:950px;
	margin:0 auto;
	padding:0px;
	background-color:#FFFFFF;
	text-align:left;
	overflow:hidden;
}
#mainDiv87 {
	width:773px;
	margin:0 auto;
	padding:0px;
	background-color:#FFFFFF;
	text-align:left;
	overflow:hidden;
}
#mainDiv68 {
	width:734px;
	margin:0 auto;
	padding:0px;
	background-color:#FFFFFF;
	text-align:left;
	overflow:hidden;
}
#header_img {
	width:986px;
	margin:0 auto;
}
.full_row
{
	width:100%;
	font-size:12px;
	font-weight:bold;
	float:left;
	border-bottom:1px solid #ddd;
	margin: 10px 0px;
	position:relative;
}
.full_row_layout {
	width:100%;
	font-size:12px;
	font-weight:bold;
	float:left;
	border-bottom:1px solid #ddd;
}
.full_row_function {
	font-size:12px;
	font-weight:bold;
	overflow:hidden;
}
.full_row_os {
	width:100%;
	font-size:12px;
	font-weight:bold;
	float:left;
	padding-bottom:30px;
}
.title_row {
	font-size:15px;
	font-weight:bold;
	padding-bottom:10px;
	padding-top:10px;
	text-align:center;
}
.keycapHide
{
	display:none;
}
.keycapShow
{
	display:block;
}
.typeHide
{
	display:none;
}
.typeShow
{
	display:block;
}
.customOptionAll
{
	overflow:hidden;
}
.customOption
{
	width:235px;
	float:left;
	margin:2px;
}
.optionReset
{
	font-weight:bold;
}
#customOptionSelect #keycapColor, #customOptionSelect #keytypeColor
{
	overflow		: hidden;
	margin-top		: 10px;
}
#customOptionSelect .keycap, #customOptionSelect .keytype
{
	width			: 380px;
	float			: left;
	border			: 1px solid #ddd;
	padding			: 0px 5px;
	margin			: 0px 3px;
}
#status_msg {
	border:1px solid rgb(255,240,66);
	background-color:rgb(255,255,205);
	margin-bottom:10px;
	border-radius:5px;
	padding:5px;
	width:940px;
	float:left;
	display:none;
}
.title_row .button_panel {
	float:right;
}
.title_row .button_panel button {
	margin-left:10px;
	float:right;
	min-width:100px;
}
.preview_div {
	float:left;
	width:376px;
	height:153px;
	margin-left:20px;
}
.keyboard_cont
{
	width:100%;
	position:absolute;
	float:left;
	margin-bottom:20px;
	top:20px;
	left:14px;
}
.keyboard_bg {
	position:absolute;
	z-index:9;
}
.keyboard_led
{
	position:absolute;
	z-index:5;
}
.keyboard_img
{
	position:absolute;
	z-index:7;
	opacity:1;
}
.keyboard_plate {
	position:absolute;
	z-index:8;
}
.keyboard_switch
{
	position:absolute;
	z-index:7;
}
.keyboard_layout {
	position:absolute;
	z-index:15;
	display:block;
	cursor:pointer;
}
.keyboard_hotspot {
	position:absolute;
	z-index:6;
	background-color:#FFFFF0;
	display:block;
	border-radius:3px;
}
.keyboard_hotspot_duplicate {
	position:absolute;
	z-index:11;
	display:block;
	cursor:pointer;
	background-color:#FFF;
}
.key_size_1
{
	width:224px;
	float:left;
	margin:5px 3px;
	cursor:pointer;
	border:1px solid #ddd;
	padding: 5px;
	text-align:center;
}
.key_size_2
{
	width:110px;
	float:left;
	margin:5px 3px;
	cursor:pointer;
	border:1px solid #ddd;
	padding: 5px;
	text-align:center;
}
.key_size_3
{
	width:72px;
	float:left;
	margin:5px 2px;
	cursor:pointer;
	border:1px solid #ddd;
	padding: 5px;
	text-align:center;
}
.key_switch_active
{
	background-color:#00FF00;
}
.key_switch_active2
{
	background-color:#00FF00;
}
.key_hover:hover
{
	cursor:pointer;
	border:1px solid #ff0000;
}
#os_key {
	position:absolute;
	z-index:14;
	display:block;
	cursor:pointer;
}
#function_keys {
	position:absolute;
	z-index:14;
	display:block;
	cursor:pointer;
}
#colours {
	float:left;
	width:44%;
	padding:10px 0;
	margin-bottom:12px;
}
#groups {
	float:left;
	width:0px;
	padding:0px 50px 10px;
}
.colors_title {
	font-size:15px;
	font-weight:bold;
	float:left;
	height:20px;
	margin-right:10px;
	padding-top:2px;
	padding-bottom:10px;
}
.keygroups_title {
	width:100px;
	font-size:15px;
	font-weight:bold;
	float:left;
	height:20px;
	margin-right:10px;
	padding-top:10px;
}
.colors_desc {
	font-size:16px;
	float:left;
	height:19px;
	margin-right:10px;
	padding-top:3px;
	margin-left:30px;
}
.colors_pallet {
	float:left;
	margin-right:5px;
	margin-bottom:5px;
}
.colors_pallet_selected {
	border:2px solid red!important;
}
.group_button {
	cursor:pointer;
	float:left;
	border:1px solid #ddd;
	padding:12px;
	margin-right:15px;
}
.group_button:hover {
	border:1px solid #ff5555;
	background-color:#f8f8f8;
	padding:12px;
	color:#000;
}
#group_container {
	width:450px;
}
#preview_loaded_name {
	float:left;
	margin-bottom:5px;
	width:100%
}
#preview_loaded_image {
	float:left;
	width:350px;
}
#choose_layout {
	width:732px;
	max-height:550px;
	overflow-y:scroll;
	overflow-x:hidden;
}
.choose_layout_row {
	width:700px;
	float:left;
	cursor:pointer;
	padding:5px;
	border:1px solid #d4d4d4;
	margin-bottom:10px
}
.choose_layout_name {
	width:100%;
	text-align:left;
	font-size:12px;
	font-weight:bold;
	margin-bottom:5px;
	color:#5b5b5b;
}
.choose_layout_img {
	width:100%;
	text-align:left;
}
#preview_loaded_image {
	float:left;
	width:350px;
}
.kbd_input_desc {
	width:100%;
	float:left;
	margin-bottom:10px;
}
.kbd_input_input {
	width:100%;
	float:left;
}
#file_name {
	margin:0;
	padding:3px;
	border-radius:3px;
	border:1px solid rgb(173,173,173);
	width:264px;
	color:rgb(58,58,58);
	outline:none;
}
#load_dlg a {
	width:98%;
	float:left;
	cursor:pointer;
	padding:5px;
	border:1px solid #d4d4d4;
	margin-bottom:10px;
	text-decoration:none;
	outline:none;
	margin-bottom:5px;
}
#load_dlg a:hover {
	border:1px solid #000;
}
#load_dlg a div {
	width:32%;
	float:left;
	margin-right:1.3%;
	overflow:hidden;
}
.key_img_btn_os {
	border:1px solid #ddd;
	padding:12px;
}
.key_img_btn_os:hover {
	border:1px solid #ff5555;
	background-color:#f8f8f8;
	padding:12px;
	color:#000;
}
.os_key_selector {
	cursor:pointer;
	margin:5px 0px;
	border:1px solid #ddd;
	padding: 5px;
	text-align:center;
}
.os_key_selector:hover
{
	border:1px solid #ff5555;
	background-color:#f8f8f8;
	color:#000;
}
.hidden_info {
	display:none;
}
#login_dialog {
	overflow:hidden;
	width:auto;
	height:auto;
}
#login_dialog .row {
	float:left;
	height:20px;
	width:100%;
	margin:5px 0;
}
#login_dialog .line {
	float:left;
	height:0;
	width:100%;
	margin:8px 0;
	border:1px #5b5b5b solid;
}
#login_dialog .row _button {
	float:left;
	height:25px;
	width:100%;
	margin:5px 0;
	border:1px #5b5b5b solid;
}
#login_dialog .label {
	float:left;
	height:100%;
	width:25%;
	margin-top:5px;
}
#login_dialog .value {
	float:left;
	height:100%;
	width:75%;
}
#login_dialog .value button {
	float:right;
	width:20%;
}
#login_dialog .value input {
	float:left;
	height:100%;
	width:100%;
}
.read_only_show {
	display:none;
}
.designer_hr {
	width:98%;
	border:none;
	height:1px;
	color:#ddd;
	background-color:#ddd;
}
.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button {
	font-family:Arial,sans-serif;
	font-size:1em;
	padding:1px;
}

#keyboard_bgs img {position:absolute;}

@import url('https://fonts.googleapis.com/css?family=Lora:400,700i');

.my-progress-bars
{
	background-color:rgba(39, 43, 48, 0.5);
	position: relative;
	z-index:16;
	top:8px;
}

.circular-progress-bar
{
	position: relative;
	margin: 0 auto;
}
.circular-progress-bar canvas
{
	position:absolute;
	top:0px;
	left:0px;
}

.progress-percentage, .progress-text {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 0px 60px;
	color:#ffffff;
}

.progress-percentage {
	font-size: 60px;
    transform: translate(-50%, -85%);
}

.progress-text {
    transform: translate(-50%, 0%);
    color: #585858;
    font-size: 21px;
}


/*
커스텀 컬러 박스
*/
.colorBox { width:10px; height:10px; display:inline-block; border-radius:10px; border: 1px solid #ececec; }