﻿/* === Orderform etc, registration & profile === */

#order .clearfix:after { clear:both; }
#order .clearfix:before, #order .clearfix:after { display:block; content:""; line-height:0; }

#order { overflow:hidden; font-size:1.6em; position:relative; }
#order legend > p { font-size: 1.6rem; }
#order label > p { font-size: 1.6rem; display:inline-block; margin-bottom:0; }
#order ul li { font-size:0.8em; float:left; margin-right:0.5em; }

#order > .content { position:relative; }
#order > .content > .title { position:absolute; left:-999em; }

#order div.formdivider { margin:0; padding:0; clear:both; height:1.5em; line-height:1em; }


input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select, option,
textarea {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
  border-radius: 4px;
  border: none;
  border: solid 1px;
  color: inherit;
  display: inline-block;
  outline: 0;
  padding: 0 1rem;
  text-decoration: none;
}
		input[type="text"]:invalid,
		input[type="password"]:invalid,
		input[type="email"]:invalid,
		select:invalid,
		textarea:invalid {
			box-shadow: none;
		}

	.select-wrapper {
		text-decoration: none;
		display: inline-block;
		position: relative;
	}

		.select-wrapper:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
			text-transform: none !important;
			background-color:#6b8ed3;
			color:#fff;
			border-top-right-radius:4px;
			border-bottom-right-radius:4px;
		}

		.select-wrapper:before {
			content: '\f078';
			display: block;
			height: 3.25rem;
			line-height: 3.25rem;
			pointer-events: none;
			position: absolute;
			right: 0;
			text-align: center;
			top: 0;
			width: 2.75rem;
		}

		.select-wrapper select::-ms-expand {
			display: none;
		}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"] {
  height: 3.25rem; }

	textarea {
		padding: 0.75rem 1rem;
	}

select {
  /*
  background-size: 1.25rem;
  background-repeat: no-repeat;
  background-position: calc(100% - 1rem) center;
  */
  height: 3.25rem;
  padding-right: 3.25rem; padding-left:0.5rem;
  text-overflow: ellipsis;
  font-size:1.4rem; }
  select:focus::-ms-value {
    background-color: transparent; }
  select::-ms-expand {
    display: none; }

input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select,
textarea {
  /*background-color: /*rgba(0, 0, 0, 0.075);*/
  border-color: rgba(0, 0, 0, 0.25); }

	/*select {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(0, 0, 0, 0.35)' /%3E%3C/svg%3E");
	}*/

	select option {
    	color: #2c2d2d;
		background-color: #ffffff;
		outline:none;
	}


	input[type="checkbox"],
	input[type="radio"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		display: block;
		float: left;
		margin-right: -2rem;
		opacity: 0;
		width: 1rem;
		z-index: -1;
	}

		input[type="checkbox"] + label,
		input[type="radio"] + label {
			text-decoration: none;
			cursor: pointer;
			display: inline-block;
			/*font-size: 1rem;
			font-weight: 300;*/
			padding-left: 2.4rem;
			padding-right: 0.75rem;
			position: relative;
			line-height:1.65rem;
			margin-bottom:1rem;
		}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				font-family: FontAwesome;
				font-style: normal;
				font-weight: normal;
				text-transform: none !important;
			}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				border-radius: 4px;
				border: solid 1px;
				content: '';
				display: inline-block;
				height: 1.65rem;
				left: 0;
				line-height: 1.58125rem;
				position: absolute;
				text-align: center;
				top: -0.;
				width: 1.65rem;
			}

		input[type="checkbox"]:checked + label:before,
		input[type="radio"]:checked + label:before {
			content: '\f00c';
		}

	input[type="checkbox"] + label:before {
		border-radius: 4px;
	}

	input[type="radio"] + label:before {
		border-radius: 100%;
	}

	input[type="checkbox"] + label,
	input[type="radio"] + label {
		color: #2c2d2d;
	}

		input[type="checkbox"] + label:before,
		input[type="radio"] + label:before {
			background: rgba(0, 0, 0, 0.075);
			border-color: rgba(0, 0, 0, 0.25);
		}

	input[type="checkbox"]:checked + label:before,
	input[type="radio"]:checked + label:before {
		background-color: #6b8ed3; /*#54B94F;*/
		border-color: #6b8ed3;
		color: #ffffff;
	}

	input[type="checkbox"]:focus + label:before,
	input[type="radio"]:focus + label:before {
		border-color: #6b8ed3;
		box-shadow: 0 0 0 1px #6b8ed3;
	}
/*
.quantity {
  display:inline-block;
  position: relative;
}

.quantity input[type=number]::-webkit-inner-spin-button,
.quantity input[type=number]::-webkit-outer-spin-button
{
  -webkit-appearance: none;
  margin: 0;
}

.quantity input[type=number]
{
  -moz-appearance: textfield;
}

.quantity input {

  height: 3.25rem;
  line-height: 1.65;

  display: block;
  margin: 0;
  padding-left: 0.5rem;
  padding-right: 2.75rem;
}

.quantity input:focus {
  outline: 0;
}

.quantity-nav {

  position: absolute;
  height: 3.25rem;
  top:0; right:0;
}

.quantity-button {
  position: relative;
  cursor: pointer;
  border-left: 0px solid #eee;
  width: 2.75rem;
  text-align: center;
  color: #fff;
  background-color:#6b8ed3;
  font-size: 12px;
  font-family: "Lato", sans-serif;
  line-height: 1.5;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.quantity-button.quantity-up {
  position: absolute;
  height: calc(50% - 1px);
  top: 0;
  border-top-right-radius: 4px;
  border-bottom: 0px solid #fff;
}

.quantity-button.quantity-down {
  position: absolute;
  bottom: 0;
  height: calc(50% - 1px);
  border-bottom-right-radius: 4px;
}
*/

/*#order select, */
#order input, #order textarea { font-size:1em; line-height:1; padding:0.3125em; margin-bottom:1em; border:1px solid #c1c1c1; border-radius:0.3125em; outline:none;}
#order select { width:8.75em; }
#order input[type=number] { width:4em; margin-right:0.5em; }
/*
#order input[type=checkbox] { background: none; border: none; }
#order .special input[type=checkbox] { margin-bottom:0; }
#order input[type=radio] { background: none; border: none; margin-top:0.5em; margin-bottom:0.5em; }
*/
#order input[type='submit'], #order input[type='reset'] { display:block; float:left; margin-right:0.3125em; border:none; outline:none; }

#order label, #order span.fixed { display:inline-block; margin-right:0.3125em; }
#order label.error, #order span.error { color:#da4645; font-size:0.75em; margin-left:0.5rem; margin-bottom:1em; }
#order input.error:focus { border-color:#da4645; }
#order label.fixed, #order span.fixed { width:6.5em; }
#order label.fix { width:8.5em; }
#order label.widefix { width:20.5em; }
#order label.xtrawidefix { width:27.5em; }
#order label.small, #order span.small { font-size:0.8em; margin-left:1em; }

#order span.info { display:block; margin-bottom:1em; clear:both; }
#order span.explanation, #order label.explanation { display:inline; margin:0 0.3125em; }
#order fieldset { margin-top:3em; }
#order div.actions li a
		{
			position: relative;
			display: inline-block;
			margin-top: 0; margin-bottom:1em;
			padding: 0.5em 1em;
			background: #6b8ed3;
			border-radius: 6px;
			text-decoration: none !important;
			text-transform: uppercase;
			font-size: 0.8em;
			color: #fff !important;
			transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
			cursor: pointer;
		}

#order div.actions li a:hover { background:#b7cefb; color:#fff !important; }
#order div.actions li.disabled a { display:none; }

#order .red { color:#da4645; }
#order legend { margin-bottom: 1em; }
#order legend.special {  }
#order legend.header { text-transform:uppercase; font-size:1.5em; letter-spacing:0.01em; }

#order div.steps { padding:5em 0 2em 0; border-bottom:1px solid #b7cefb; border-top:1px solid #b7cefb;}
#order li span.title { display:block; margin-top:0.8em; color:#2c2d2d; font-style:italic;  }
#order li.current span.title { font-style:normal; font-size:1em; }
#order li span.number { display:inline-block; background:#b7cefb; color:#fff; padding:0.3em 0.5em; border-radius:3px; z-index:100; }
#order li.current span.number { background:#6b8ed3/*#3e64af;*/ }
#order li.done span.number { background: #b7cefb; }
#order li.error span.number { background: #da4645; }
#order span.audible { display:none; }
#order li[role=tab] { position:relative; text-align:center; z-index:1; width:23%; }
#order li[role=tab]:after { content:""; width:94%; height:2px; background:#b7cefb; position:absolute; left:-48.85%; top:25%; z-index:-1; }
/*#order li[role=tab].current:after, #order li[role=tab].done:after { background:#6b8ed3; }*/
#order li[role=tab]:first-child:after { content:none; }
#order li[role=tab] a { text-decoration:none; outline:none; font-size:0.8em; }

#order.Paper .online, #order.Papir .online { display:none; }
#order.Online .paper { display:none; }

#badges span.explanation { margin-left:0; margin-right:1em; }
#order .leftmargin { margin-left:1em; }
#order .bottommargin { margin-bottom:0.5rem; }
#order .topmargin { margin-top:0.5rem; }
#order .toggle { display:inline-block; margin-bottom:1em; text-decoration:none; }
#order a > .label { color:#2c2d2d; margin-right:0.3125em; }
#order a.toggle > span > i { font-size:0.875em; }
#moreuserscontainer { margin-top: 1rem; }

#delivery { margin-bottom:1em; }
#delivery label.fixed, #invoice label.fixed, #limit label.fixed { width:12.5em; }
#order span.deliverymethodinfo { display:block; max-width:35em; width:100%; }
#delivery .select-wrapper, #invoice .select-wrapper { width:100%; max-width:35em; }
#order select.deliverypayment { /*margin:0.5em 0 3.5em 0;*/ width:100%; }
#delivery input[type='text'], #delivery input[type='email'], #invoice input[type='text'], #invoice input[type='email'], #limit input, #user input:not([type='checkbox'])  { width:100%; max-width:22em; }
#moreuserscontainer input { width:100%; max-width:15em; }
#order textarea { max-width:35em; width:100%; display:block; }



/* MOBILE */

@media screen and (max-width: 480px) {
	#delivery label.fixed, #invoice label.fixed, #limit label.fixed, #user label.fixed, #order label, #order a > .label,
	#order span.fixed, #order label.fix, #order label.widefix, #order label.xtrawidefix { width:100%; margin-bottom: 0.5rem; }
	#startkit + label { width:90%; }
	#order label + a.more { display:inline-block; margin-left:1.5em; margin-bottom:2rem; }

	#delivery input[type='text'], #delivery input[type='email'],
	#invoice input[type='text'], #invoice input[type='email'],
	#limit input, #user input:not([type='checkbox']), #moreuserscontainer input {
		max-width:none;
	}

	#order label.small { margin-left:0; }
	#moreuserscontainer label.leftmargin, #order label.leftmargin { margin-left:0; }
	#moreuserscontainer label { width:100%; }
	.select-wrapper { width:100%; max-width:35em; }
	#order select { width:100%; }
	div.paper { margin-top:2em; }
	#order a.toggle { display:block; margin-bottom:0; }
	#order .paper a.toggle { margin-bottom:1em; }
	#morelangcontainer label:not(.leftmargin) { margin-top:1.5em; }
	#morelangcontainer label:first-child { margin-top:0; }
	#morelangcontainer span.explanation { margin-left:0; margin-right:1em; }
	#morelangcontainer span.info { margin-bottom:0.5em; margin-top:2em; font-weight:bold; }
	#morelangcontainer span.info + label { margin-top:0; }
	#badges label { width:3em; margin-bottom: 0; margin-right:1em; }
	#badges span.explanation { margin-right:calc(100% - 17.5rem); }

	#booklets span.explanation, #books span.explanation, #creativitymatinfo span.explanation,
	#dvdinfo span.explanation {
		margin-left:0; margin-right:1em;
	}

	#booklets input + span.explanation, #books input + span.explanation,
	#creativitymatinfo input + span.explanation, #dvdinfo input + span.explanation {
		display:block; margin-right:0;
	}

	#order li[role=tab] { width:21.9%; }
	#order label.error { position:relative; top:-1em; }

}
