/*
	====================================================================================================
	
	Glams Co. Ltd. Copyright 2019
	
	====================================================================================================	
*/

html {
	margin: 0;
	padding: 0;
}

body {
	width: 100%;
	height: 100%;
	font-family: Arial,sans-serif;
	color: #EEEEEE;
	background-color: #222222;
	margin: 0;
	padding: 0;
}

h1 {
	color: #FFFFFF;
	margin: 0;
	padding: 0;
}

h3 {
	line-height: 1.5em;
	margin: 0 0 1em 0;
}

a {
	color: #339966;
	text-decoration: none;
}

table {
	width: 100%;
}

th {
	color: #AAAAAA;
	width: 10em;
	font-weight: normal;
	line-height: 1.2em;
	text-align: left;
	vertical-align: top;
	padding: 1em 0;
}

td {
	font-weight: bold;
	line-height: 1.2em;
	text-align: left;
	vertical-align: top;
	padding: 1em 0;
}

hr {
    border: 0;
    height: 1px;
    background-color: #333333;
	margin-bottom: 1em;
}

.main_section {
	margin-bottom: 2em;
}

.clickable {
	line-height: 2em;
	cursor: pointer;
}

.clickable:hover {
	color: #339966;
}

.link {
	color: #339966;
}

.discrete_text {
	color: #999999;
}

.data_table {
    border-spacing: 0;
    border-collapse: collapse;	
	border-top: 1px solid #333333;
	border-left: 1px solid #333333;
	margin-bottom: 1em;
}

.data_table th {
	border-bottom: 1px solid #333333;
	border-right: 1px solid #333333;
	padding: 0.5em;
}

.data_table td {
	border-bottom: 1px solid #333333;
	border-right: 1px solid #333333;
	padding: 0.5em;
}

.data_key {
	display: inline-block;
	width: 8em;
}

.data_value {
	display: inline-block;
	width: 10em;
	font-size: 3em;
}

#header {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	line-height: 3em;
	height: 3em;
	color: #FFFFFF;
	background-color: #339966;
	padding: 0 1em 0;
	overflow: hidden;
	z-index: 100;
}

#header a {
	color: #FFFFFF;
	text-decoration: none;
}


#title {
	float: left;
}

#user_menu {
	float: right;
}

#main_menu {
	position: fixed;
	top: 3em;
	left: 0;
	bottom: 0;
	width: 12em;
	background-color: #333333;
}

#main_menu ul {
	padding: 0;
	margin: 0;
}

#main_menu li {
	list-style: none;
	background-color: #393939;
	border: 1px solid #444444;
	margin: 0.5em;
}

#main_menu a {
	color: #EEEEEE;
	text-decoration: none;
	display: block;
	padding: 1em;
}

#main_menu .selected {
	background-color: #222222;
	border: 1px solid #444444;
}

#main_menu .selected a {
}

#start {
	width: 48em;
	margin: 0 auto 0;
	text-align: center;
}

#start_menu ul {
	width: 48em;
	padding: 0;
	margin: 0;
}

#start_menu li {
	float: left;
	width: 11em;
	height: 11em;
	list-style: none;
	box-sizing: border-box;	
	border: 1px solid #339966;
	border-radius: 0.2em;
	margin: 0.5em;
	overflow: hidden;
}

#start_menu a {
	text-decoration: none;
	display: block;
	height: 100%;
	color: #FFFFFF;
	background-color: #339966;
	line-height: 8em;
	padding: 1em;
	margin: 0;
}

#start_menu a:hover {
	color: #FFFFFF;
	background-color: #226644;
}


#main {
	position: relative;
	color: #EEEEEE;
	margin: 3em 0 0 12em;
	padding: 1em;
}

h2 {
	margin: 0 0 1em;
	padding: 0;
}

.tab_selected {
	float: left;
	min-width: 6em;
	color: #339966;
	background-color: #2A2A2A;
	border: 1px solid #2A2A2A;
	border-bottom: none;
	padding: 1em;
	cursor: pointer;
}

.tab {
	float: left;
	min-width: 6em;
	border: 1px solid #333333;
	border-bottom: none;
	padding: 1em;
	cursor: pointer;
}

.top_bar {
	background-color: #2A2A2A;
	margin-bottom: 1em;
	padding: 1em;
}

.top_bar form {
	padding: 0;
	margin: 0;
}

.actions {
	float: left;
	padding-right: 2em;
}

.actions_right {
	float: right;
}

.search {
	float: left;
}

.search form {
	padding: 0;
}

.clear {
	clear: both;
	margin: 0;
	padding: 0;
}

.list {
	border-bottom: 1px solid #333333;
	margin: 0;
	padding: 0;
}

.list li {
	list-style: none;
	border-top: 1px solid #333333;
	margin: 0;
	padding: 2em 0;
}

.list li:hover {
	background-color: #242424;
	cursor: pointer;
}

.list section {
	line-height:2.3em;
}

.thumbnail_list {
	margin: 0;
	padding: 0;
}

.thumbnail_list li {
	float: left;
	list-style: none;
	width: 17em;
	height: 22em;
	border: 1px solid #333333;
	margin: 0 0.5em 0.5em 0;
	padding: 1em;
}

.thumbnail_title {
	margin-bottom: 0.5em;
}

.thumbnail_image {
	width: 17em;
	height: 17em;
	text-align: center;	
	cursor: pointer;
}

.thumbnail_image img {
	max-width: 100%;
	max-height: 100%;
}


.grid {
	position: relative;
}

.item {
	display: block;
	position: absolute;
	width: 17em;
	height: 17em;
	background-color: #222222;
	border: solid 1px #333333;
	margin: 0 0.5em 0.5em 0;
	padding: 1em;
	z-index: 1;
}

.item.muuri-item-dragging {
	z-index: 3;
}

.item.muuri-item-releasing {
	z-index: 2;
}

.item.muuri-item-hidden {
	z-index: 0;
}

.item-content {
	position: relative;
	width: 100%;
	height: 100%;
	cursor: move;
}

.item-content .image {
	text-align: center;
}

.item-content img {
	max-width: 17em;
	max-height: 13em;
	margin-bottom: 1em;
}

.item-content .remove {
	position: absolute;
	left: 0;
	bottom: 0;
}

.image_left {
	float: left;
	width: 22em;
	height: 30em;
	text-align: center;	
	border: 1px solid #333333;
	margin: 0 2em 1em 0;
	padding: 1em;
}

.image_left img {
	max-width: 100%;
	max-height: 100%;
}


input[type="text"], input[type="number"], input[type="password"], input[type="date"] {
	width: 20em;
	font-size: 1em;
	background-color: #EEEEEE;
	border: 1px solid #666666;
	border-radius: 0.2em;
	padding: 0.5em;
}

input[type="date"] {
	width: 11em !important;
}

.small_field {
	width: 9em !important;
}

.super_small_field {
	width: 4em !important;
}

input[type="submit"], input[type="button"] {
	min-width: 8em;
	font-size: 1em;
	background-color: #339966;
	border: 1px solid #339966;
	-webkit-border-radius: 0.2em;
	border-radius: 0.2em;
	color: #FFFFFF;
	padding: 0.5em;
	cursor: pointer;
	-webkit-appearance: none;
}

input[readonly="readonly"] {
	color: #333333;
	background-color: #AAAAAA;
}

/*
input[type="file"] {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}*/

.disabled {
	opacity: 0.25;
	cursor: default !important;
}

select {
	font-size: 1em;
	background-color: #EEEEEE;
	border: 1px solid #666666;
	border-radius: 0.2em;
	padding: 0.5em;
}

textarea {
	min-width: 40em;
	font-family: Arial,sans-serif;
	font-size: 1em;
	background-color: #EEEEEE;
	border: 1px solid #666666;
	border-radius: 0.2em;
	padding: 0.5em;
}

form {
	background-color: #2A2A2A;
	padding: 1em;
}

form section {
	margin-bottom: 1em;
}

.subgroup {
	background-color: #222222;
	padding: 1em;
}

.secondary_button {
	color: #339966 !important;
	background-color: #222222 !important;
}

.alert_button {
	color: #FF3344 !important;
	background-color: #222222 !important;
	border: 1px solid #FF3344 !important;
}

.button_bar {
	padding-top: 1em;
}

.info_bar {
	color: #339966;
	background-color: #222222;
	border: 1px solid #339966;
	border-radius: 0.2em;
	padding: 1em;
	margin-bottom: 1em;
}

.error_bar {
	color: #FF3344;
	background-color: #222222;
	border: 1px solid #FF3344;
	border-radius: 0.2em;
	padding: 1em;
	margin-bottom: 1em;
}

.error {
	color: #FF3344;
	margin-top: 0.5em;
}

li.error {
	background-color: #550022;
}

li.error:hover {
	background-color: #660022;
}

li.error input[type="button"] {
	background-color: #FF3344;
	border-color: #FF3344;
}

li.error .secondary_button {
	color: #FF3344 !important;
	background-color: #550022 !important;
}

.status_marked {
	color: #FFFFFF;
}


.status_ok {
	color: #339966;
}

.status_alert {
	color: #FF3344;
}

#login_wrapper {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#login {
	width: 30em;
	background-color: #2A2A2A;
	border: 1px solid #333333;
	border-radius: 0.2em;
	margin: 5em auto;
}

#login_header {
	line-height: 3em;
	height: 3em;
	color: #FFFFFF;
	background-color: #339966;
	border-radius: 0.2em;
	padding: 0 1em 0;
	overflow: hidden;
}


.progress_bar_wrapper {
	float: left;
	width: 40em;
	height: 1.5em;
	border: 1px solid #333333;
	padding: 0.4em;
}

.progress_bar {
	height: 100%;
	background-color: #FFFFFF;
}

.progress_bar_full {
	height: 100%;
	background-color: #339966;
}

.suggested {
	background-color: #333333;
}

.highly_suggested {
	background-color: #226644;
}

/* .text_suggested {
	color: #24573e;
} */

.text_highly_suggested {
	color: #339966;
}

.search_select {
	position: relative;
}

.search_select_options {
	position: absolute;
	left: -16em;
	top: 1.5em;
	width: 54em;
	background-color: #111111;
	z-index: 1;
	display: none;
}

.search_select_options a {
	width: 14em;
	padding: 2em;
	display: inline-block;
}

.search_select_options a:hover {
	background-color: #222222;
}


/*
	----------------------------------------------------------------------------------------------------
	
	CUSTOM CHECKBOX
	
	----------------------------------------------------------------------------------------------------
*/

 /* Customize the label (the container) */
.checkbox {
	display: block;
	position: relative;
	line-height: 1.6em;
	padding-left: 2.2em;
	margin-bottom: 1em;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 1.6em;
	width: 1.6em;
	background-color: #EEEEEE;
	border-radius: 0.2em;
}

/* On mouse-over, add a grey background color */
.checkbox:hover input ~ .checkmark {
	background-color: #CCCCCC;
}

/* When the checkbox is checked, add a blue background */
.checkbox input:checked ~ .checkmark {
	background-color: #339966;
	border-radius: 0.2em;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.checkbox input:checked ~ .checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
.checkbox .checkmark:after {
	left: 0.55em;
	top: 0.25em;
	width: 0.3em;
	height: 0.6em;
	border: solid white;
	border-width: 0 0.25em 0.25em 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}



/*
	----------------------------------------------------------------------------------------------------
	
	CUSTOM RADIO
	
	----------------------------------------------------------------------------------------------------
*/

 /* Customize the label (the container) */
.radio {
	display: block;
	position: relative;
	line-height: 1.6em;
	padding-left: 2.2em;
	margin-bottom: 1em;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default radio button */
.radio input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom radio button */
.radiomark {
	position: absolute;
	top: 0;
	left: 0;
	height: 1.6em;
	width: 1.6em;
	background-color: #EEEEEE;
	border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio:hover input ~ .radiomark {
	background-color: #CCCCCC;
}

/* When the radio button is checked, add a blue background */
.radio input:checked ~ .radiomark {
	background-color: #339966;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radiomark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio input:checked ~ .radiomark:after {
	display: block;
}

/* Style the indicator (dot/circle) */
.radio .radiomark:after {
	top: 0.5em;
	left: 0.5em;
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	background: white;
}



/*
	----------------------------------------------------------------------------------------------------
	
	CUSTOM BIG RADIO
	
	----------------------------------------------------------------------------------------------------
*/

 /* Customize the label (the container) */
.big_radio {
	display: inline-block;
	position: relative;
	font-size: 1.3em;
	line-height: 2.6em;
	padding-left: 3.2em;
	margin-bottom: 1em;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default radio button */
.big_radio input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom radio button */
.big_radiomark {
	position: absolute;
	top: 0;
	left: 0;
	height: 2.6em;
	width: 2.6em;
	background-color: #EEEEEE;
	border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.big_radio:hover input ~ .big_radiomark {
	background-color: #CCCCCC;
}

/* When the radio button is checked, add a blue background */
.big_radio input:checked ~ .big_radiomark {
	background-color: #339966;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.big_radiomark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the indicator (dot/circle) when checked */
.big_radio input:checked ~ .big_radiomark:after {
	display: block;
}

/* Style the indicator (dot/circle) */
.big_radio .big_radiomark:after {
	top: 0.5em;
	left: 0.5em;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: white;
}


/*
	----------------------------------------------------------------------------------------------------
	
	CUSTOM SQUARE CHECKBOX
	
	----------------------------------------------------------------------------------------------------
*/

 /* Customize the label (the container) */
.square_checkbox {
	display: inline-block;
	position: relative;
	height: 7em;
	width: 7em;
	font-size: 1.3em;
	line-height: 7em;
	text-align: center;
	padding: 0em;
	margin-bottom: 0.2em;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default checkbox */
.square_checkbox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.square_checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 7em;
	width: 7em;
	background-color: #FFFFFF08;
	border: 1px solid #444444;
	border-radius: 0.2em;	
}

/* On mouse-over, add a grey background color */
.square_checkbox:hover input ~ .square_checkmark {
}

/* When the checkbox is checked, add a blue background */
.square_checkbox input:checked ~ .square_checkmark {
	background-color: #339966;
	opacity: 0.7;
}

/* Create the checkmark/indicator (hidden when not checked) */
.square_checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.square_checkbox input:checked ~ .square_checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
.square_checkbox .square_checkmark:after {
}



/*
	----------------------------------------------------------------------------------------------------
	
	CUSTOM SQUARE RADIO
	
	----------------------------------------------------------------------------------------------------
*/

 /* Customize the label (the container) */
.square_radio {
	display: inline-block;
	position: relative;
	height: 8em;
	width: 8em;
	font-size: 1.3em;
	line-height: 8em;
	text-align: center;
	padding: 0em;
	margin-bottom: 0.2em;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default radio button */
.square_radio input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom radio button */
.square_radiomark {
	position: absolute;
	top: 0;
	left: 0;
	height: 8em;
	width: 8em;
	background-color: #FFFFFF08;
	border: 1px solid #444444;
	border-radius: 0.2em;
}

/* On mouse-over, add a grey background color */
.square_radio:hover input ~ .square_radiomark {
}

/* When the radio button is checked, add a blue background */
.square_radio input:checked ~ .square_radiomark {
	background-color: #339966;
	opacity: 0.7;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.square_radiomark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the indicator (dot/circle) when checked */
.square_radio input:checked ~ .square_radiomark:after {
	display: block;
}

/* Style the indicator (dot/circle) */
.square_radio .square_radiomark:after {
}



/*
	----------------------------------------------------------------------------------------------------
	
	CUSTOM SMALL SQUARE RADIO
	
	----------------------------------------------------------------------------------------------------
*/

 /* Customize the label (the container) */
.small_square_radio {
	display: inline-block;
	position: relative;
	height: 4em;
	width: 4em;
	font-size: 1.2em;
	line-height: 4em;
	text-align: center;
	padding: 0em;
	margin-bottom: 0.2em;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default radio button */
.small_square_radio input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom radio button */
.small_square_radiomark {
	position: absolute;
	top: 0;
	left: 0;
	height: 4em;
	width: 4em;
	background-color: #FFFFFF08;
	border: 1px solid #444444;
	border-radius: 0.2em;
}

/* On mouse-over, add a grey background color */
.small_square_radio:hover input ~ .small_square_radiomark {
}

/* When the radio button is checked, add a blue background */
.small_square_radio input:checked ~ .small_square_radiomark {
	background-color: #339966;
	opacity: 0.7;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.small_square_radiomark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the indicator (dot/circle) when checked */
.small_square_radio input:checked ~ .small_square_radiomark:after {
	display: block;
}

/* Style the indicator (dot/circle) */
.small_square_radio .small_square_radiomark:after {
}


/*
	----------------------------------------------------------------------------------------------------
	
	MEASUREMENT
	
	----------------------------------------------------------------------------------------------------
*/

.measurement_template {
	display: none;
}

#measurement_manual {
	position: absolute;
	right: 0;
	top: 0;
	width: 50%;
	background-color: #FFFFFF;
	padding: 0.5em;
	border-left: 1px solid #000000;
	box-shadow: -1em 0 2em -0em #000000;
	display: none;
}

#measurement_manual h3 {
	color: #111111;
}

#measurement_manual_content img {
	width: 100%;
}

.category {
	line-height: 1.7em;
	padding-left: 2em;
	display: none;
}