/* ========= Font family */
@import url('https://fonts.googleapis.com/css?family=Lato:400,100,300,100italic,300italic,400italic,700,700italic,900,900italic');

/* ========= Remove space from all elements and add font-family */
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Lato', sans-serif;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

a:hover{
	text-decoration: none;
}

#background {
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-image: url(../files/images/background.jpg);
}

#content > section div ul {
    margin: revert;
    padding: revert;
}

#content > section div ul li {
    list-style: disc;
}

#dm_dsamembership_submitbtn.link {
    background-color: #458948;
    color: #ffffff;
}

.dm_dsanewmember_showinfo{
	display: block !important;
}

.dm_dsanewmember_notvalid{
	border: 1px solid #ff0000 !important;
}
.dm_dsanewmember_valid{
	border: 1px solid #77b279 !important
}
#dm_dsanewmember_overlay{
	width: 100%;
	height: 100%;
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 100;
	cursor: pointer;
}

.dm_dsanewmember_disabled{
	background-color: #8a8a8a !important;
	cursor: no-drop;
}

#zzw_country,  #zzw_MemberType{
	border-color: #77b279;
}

.error{
	color: #ff0000;
}

.dm_defaultform_membershipinfo{
	display: none;
}

#dm_defaultform_becomemember{
	margin: 10px 0;
}
/*  ========= Fail and succes signs */
#dm_dsanewmember_success{
	background-color: #77b279;
}
#dm_dsanewmember_fail{
	background-color: #ff0000;
}

#dm_dsanewmember_message .dm_dsalogin_closepopupstyle{
	background-color: #ffffff;
}
.dm_dsalogin_closepopupstyle{
	width: 25% !important;
}

.dm_dsanewmember_passwordcon ul{
	margin: 5px !important;
}
/* ========= Desktop size */

@media screen and (min-width: 1441px){
	
/* 	========= changing the width of container */
	#content{
		width: 40%;
		margin: 0 auto;
		padding:  20px 0;
	}
	#content h1{
		margin: 20px;
	}
	
	#dm_dsanewmember_container{
		background-color: rgba(255, 255, 255, 0.8);
		padding: 20px;
		border-radius: 10px;
	}
	
	#dm_dsacheckEmail_btn{
		width: 25%; 
	}
/* 	========= form container none, and changing it to flex with js */
	#dm_dsamembership_infoform{
		display: none;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-top: 10px; 
	}
/* 	========= changes width on the div elements - there are 4 different sizes defined with classes */
	input[name=zzw_EAN], #dm_dsamembership_infoform div, #dm_dsamembership_infoform h3, input[name="zzw_Mobile"], input[name="zzw_Phone"], #dm_dsamembership_infoform select {
	    width: 100%;
	}
	
	.dm_dsamembership_firstinput{
		width: 64% !important;
	}
	.dm_dsamembership_secondinput{
		width: 35% !important;
	}
	#dm_dsamembership_zipcode{
		width: 20% !important;
	}
	#dm_dsamembership_city{
		width: 79% !important;
	}
	.dm_dsamembership_flex{
		width: 49.5% !important;
	}
	.dm_dsanewmemeber_questioninput{
		width: 90% !important;
		display: inline-block;
	}
	
	/* 	========= Questionmarks and boxes */
	.dm_dsanewmember_questionmark, .dm_dsanewmember_check{
		border: 1px solid #8a8a8a;
		color: #000000;
		padding: 5px 11px;
		margin-left: 2%;
		border-radius: 50%;
		font-weight: bolder;
		cursor: pointer;
		position: relative;
	}
	.
	.dm_dsanewmember_check{
		color: #77b279;
		display: none;
		border: none;
	    position: absolute;
	    right: 0;
	}
	.dm_dsanewmember_passcheck{
		color: #77b279;
		font-weight: bolder;
		display: none;
	}
	/* 	========= box styling */
	.dm_dsanewmember_questionbox, .dm_dsanewmemberdfl_questionbox{
		background-color: #ffffff;
		width: 50%;
		color: #000000;
		position: absolute;
		border-radius: 10px;
		padding: 20px;
		right: 0;
		z-index: 150;
	}
	.dm_dsanewmember_questionbox a{
		word-break: break-word;
	}
	.dm_dsanewmember_questiontitle{
		font-size: 20px;
		font-weight: bold;
	}
	
	#dm_dsanewmember_membertypeinfo, #dm_dsanewmember_localDepartment, #dm_dsanewmember_unilogin, #dm_dsanewmember_becomememberinfo{
		display: none;
	}
	
	/* Becomemember info */
	#dm_dsanewmember_becomememberinfo{
		right: 28% !important;
	}
	/* 	local department */
	#dm_dsanewmember_localDepartment{
		width: 80%;	
	}
	
/* 	========== Validation */
	#zzw_Email, #password1, #password2{
		margin-bottom: 10px;
	}
	.dm_dsaformdivs_validationtext{
		margin-top: 20px;
		position: relative;
	}
	.dm_dsaformdivs_validationtext input, input[name="zzw_fullName"]{
		margin-bottom: 0;
	}
	label.error{
		padding: 0 10px;
	}
	
/* 	========= Add styling to mobile, tel, and select boxes, submit and cancel btn, this is from default.css */
	input[name=zzw_EAN], input[name="zzw_Mobile"], input[name="zzw_Phone"], #dm_dsamembership_infoform select, #dm_dsamembership_submitbtn, #dm_dsamembership_cancelbtn {
		height: 40px;
		font-size: 16px;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		padding: 0 10px;
	}
	input[name=zzw_EAN], input[name="zzw_Mobile"], input[name="zzw_Phone"]{
		border: 1px solid #cecece;
	}

/* 	========= Submit and cancel buttons */
	#dm_dsamembership_btnbox{
		display: flex;
		justify-content: space-between;
	}

	#dm_dsamembership_submitbtn{
		border: none;
		color: #ffffff;
		width: 49.5%;
	}
	
	#dm_dsamembership_cancelbtn{
		text-align: center;
		background-color: #cc6060;
		color: #ffffff !important;
		padding: 8px 10px 10px 10px;
		width: 49.5%;
	}
	
/* 	========= Color to the things their should be required */
	.dm_dsaformelements_requiredcolor{
		color: #ff0000;
	}
	
/* 	========= Hiding the labels */
	.dm_dsaformlabels_visuallyhidden {
	  border: 0;
	  clip: rect(0 0 0 0);
	  height: 1px;
	  margin: -1px;
	  overflow: hidden;
	  padding: 0;
	  position: absolute;
	  width: 1px;
	}
/* 	========= box-shadow */
	#dm_dsanewmember_container, #dm_dsanewmember_message, #dm_dsaalreadymember_message, .dm_dsanewmember_questionbox, dm_dsanewmemberdfl_questionbox{
		-webkit-box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75);
		-moz-box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75);
		box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75);
	}
	
/* 	========= membership */
	#dm_mlfform_membershipinfo{
		margin: 10px 0 20px;
	}
	
/* 	========= Error and success messages styling - display none as default - changes in JavaScript to block when needed */
	#dm_dsanewmember_message, #dm_dsaalreadymember_message{
		width: 40%;
		text-align: center;
		padding: 60px;
		position: fixed;
		top: 25%;
		left: 30%;
		color: #ffffff;
		font-size: 20px;
		border-radius: 10px;
		display: none;
		z-index: 150;
		
	}
/*	========= If you already have a profile message */
	#dm_dsaalreadymember_message{
		background-color: #ffffff;
		color: #000000;
		text-align: left;
	}
	
	#dm_dsaalreadymember_message a{
		display: inline-block;
		margin-top: 10px;
		background-color: #77b279;
		padding: 10px;
		border-radius: 5px;
		color: #ffffff;
	}
	
	a.dm_dsalogin_closepopup{
		margin-left: 10%;
		width: 25%;
		text-align: center;
		cursor: pointer;
    }
	/*	========= Messages when you click submit btn */
	#dm_dsanewmember_submitmessages{
		position: fixed;
		z-index: 150;
		top: 25%;
		right: 25%;
		width: 50%;
		text-align: center;
		padding: 60px;
		font-size: 20px;
		color: #ffffff;
		display: none;
	}

}

label[for=zzz_becomeMember]{
	font-weight: bold;
	font-size: 16px;
}

/* ========= Small desktop and tablet */
@media (max-width: 1440px) and (min-width: 320px){
	
	input::placeholder{
		font-size: 14px;
	}
	
/*	========= changing the width of container */
	#content{
		width: 50%;
		margin: 0px auto;
		padding:  20px 0;
	}
	#content h1{
		margin: 20px;
	}
	
	#dm_dsanewmember_container{
		background-color: rgba(255, 255, 255, 0.8);
		padding: 20px;
		border-radius: 10px;
	}
	
	#dm_dsacheckEmail_btn{
		width: 25%; 
	}
/* 	========= form container none, and changing it to flex with js */
	#dm_dsamembership_infoform{
		display: none;
/* 		display: flex; */
		flex-wrap: wrap;
		justify-content: space-between;
		padding-top: 10px;
	}
/* 	========= changes width on the div elements - there are 6 different sizes defined with classes and ids*/
	input[name=zzw_EAN], #dm_dsamembership_infoform div, #dm_dsamembership_infoform h3, input[name="zzw_Mobile"], input[name="zzw_Phone"], #dm_dsamembership_infoform select{
		width: 100%;
	}
	.dm_dsamembership_firstinput{
		width: 64% !important;
	}
	.dm_dsamembership_secondinput{
		width: 35% !important;
	}
	#dm_dsamembership_zipcode{
		width: 20% !important;
	}
	#dm_dsamembership_city{
		width: 79% !important;
	}
	.dm_dsamembership_flex{
		width: 49.5% !important;
	}
	.dm_dsanewmemeber_questioninput{
		width: 90% !important;
		display: inline-block;
	}
		}
	/* 	========= Validation */
	#zzw_Email, #password1, #password2{
		margin-bottom: 10px;
	}
	.dm_dsaformdivs_validationtext{
		margin-top: 20px;
		position: relative;
	}
	.dm_dsaformdivs_validationtext input, input[name="zzw_fullName"]{
		margin-bottom: 0;
	}
	label.error{
		padding: 0 10px;
	}
	/* 	========= Questionmarks and boxes */
	.dm_dsanewmember_questionmark{
		border: 1px solid #8a8a8a;
		color: #000000;
		padding: 5px 11px;
		margin-left: 2%;
		border-radius: 50%;
		font-weight: bolder;
		cursor: pointer;
		position: relative;
	}
	.dm_dsanewmember_check{
		font-size: 20px;
	    font-weight: bolder;
		padding: 5px 11px;	    
		color: #77b279;
		display: none;
		border: none;
		position: absolute;
		right: 0;
	}
	.dm_dsanewmember_passcheck{
		color: #77b279;
		font-weight: bolder;
		display: none;
	}
	#dm_dsanewmember_countrycheck{
		display: inline-block;
	}
/* 	========= box styling */
	.dm_dsanewmember_questionbox, .dm_dsanewmemberdfl_questionbox{
		background-color: #ffffff;
		width: 50%;
		color: #000000;
		position: absolute;
		border-radius: 10px;
		padding: 20px;
		right: 0;
		z-index: 150;
	}
	.dm_dsanewmember_questionbox a{
		word-break: break-word;
	}
	.dm_dsanewmember_questiontitle{
		font-size: 20px;
		font-weight: bold;
	}
	
	#dm_dsanewmember_membertypeinfo, #dm_dsanewmember_localDepartment, #dm_dsanewmember_unilogin, #dm_dsanewmember_becomememberinfo{
		display: none;
	}
	
/* 	becomemember */
	#dm_dsanewmember_becomememberinfo{
		right: 21%;
	}

	/* Membertype */
	
	#dm_dsanewmember_membertypeinfo, #dm_dsanewmember_localDepartment{
		width: 80%;
	}
	
/* 	========= Add styling to mobile, tel, and select boxes, submit and cancel btn, this is from default.css */
	input[name=zzw_EAN], input[name="zzw_Mobile"], input[name="zzw_Phone"], #dm_dsamembership_infoform select, #dm_dsamembership_submitbtn, #dm_dsamembership_cancelbtn {
		height: 40px;
		font-size: 16px;
		margin-bottom: 10px;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		padding: 0 10px;
	}
	input[name=zzw_EAN], input[name="zzw_Mobile"], input[name="zzw_Phone"], #zzw_localDepartment {
		border: 1px solid #cecece;
	}

/* 	========= Submit and cancel buttons */
	#dm_dsamembership_btnbox{
		display: flex;
		justify-content: space-between;
	}

	#dm_dsamembership_submitbtn{
		border: none;
		color: #ffffff;
		width: 49.5%;
	}
	
	#dm_dsamembership_cancelbtn{
		text-align: center;
		background-color: #cc6060;
		color: #ffffff !important;
		padding: 8px 10px 10px 10px;
		width: 49.5%;
	}
	
/* 	========= Color to the things their should be required */
	.dm_dsaformelements_requiredcolor{
		color: #ff0000;
	}
	
/*  ========= Hiding the labels */
	.dm_dsaformlabels_visuallyhidden {
	  border: 0;
	  clip: rect(0 0 0 0);
	  height: 1px;
	  margin: -1px;
	  overflow: hidden;
	  padding: 0;
	  position: absolute;
	  width: 1px;
	}
/*  ========= box-shadow */
	#dm_dsanewmember_container, #dm_dsanewmember_message, #dm_dsaalreadymember_message, .dm_dsanewmember_questionbox, #dm_dsanewmember_submitmessages{
		-webkit-box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75);
		-moz-box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75);
		box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75);
	}
	
/* 	========= membership */
	#dm_mlfform_membershipinfo{
		margin: 10px 0 20px;
	}
	
/* 	========= Error and success messages styling - display none as default - changes in JavaScript to block when needed */
	#dm_dsanewmember_message, #dm_dsaalreadymember_message{
		width: 40%;
		text-align: center;
		padding: 60px;
		position: fixed;
		top: 25%;
		left: 30%;
		color: #ffffff;
		font-size: 20px;
		display: none;
		z-index: 150;
	}
	
/*  ========= If you already have a profile message */
	#dm_dsaalreadymember_message{
		background-color: #ffffff;
		color: #000000;
		text-align: left;
	}
	
	#dm_dsaalreadymember_message a{
		display: block;
		margin: 10px 0;
		background-color: #77b279;
		padding: 10px;
		border-radius: 5px;
		color: #ffffff;
		width: 75%;
		text-align: center;
		cursor: pointer;
	}
	
	
/*	========= Messages when you click submit btn */
	#dm_dsanewmember_submitmessages{
		position: fixed;
		z-index: 150;
		top: 25%;
		right: 25%;
		width: 50%;
		text-align: center;
		padding: 60px;
		font-size: 20px;
		color: #ffffff;
		display: none;
	}
}

@media screen and (max-width: 1030px){
	
	#content{
		width: 75%;
	
	}
	
}

@media screen and (max-width: 768px){
/*	========= changing the width of container */
	#content{
		width: 90%;
		margin: 0 auto;
	}
/* 	======== Error and succes messages for checkEmail */
	#dm_dsanewmember_message, #dm_dsaalreadymember_message{
		width: 75%;
		left: 13%;
	}
/* 	========= input fields size */
	#dm_dsamembership_zipcode{
		width: 25% !important;
	}
	#dm_dsamembership_city{
		width: 74% !important;
	}
/* 	========= box styling */
	.dm_dsanewmember_questionboxv .dm_dsanewmemberdfl_questionbox{
		right: 8%;
	}
	
	/* becomemember */
	#dm_dsanewmember_becomememberinfo {
	    right: 20%;
	    width: 45%;
	}

	/* Membertype */	
	#dm_dsanewmember_membertypeinfo{
		width: 60%;
	}
	
	/* Uni-Login */
	#dm_dsanewmember_unilogin {
	    width: 45%;
	}
	
}
@media screen and (max-width: 640px){
/* 	======== Error and succes messages for checkEmail */
	#dm_dsanewmember_message, #dm_dsaalreadymember_message{
		padding: 40px;
		top: 25%;
	}
	
	#dm_dsanewmember_submitmessages{
		width: 75%;
		right: 12.5%;
	}
/* 	========= input fields size */
	#dm_dsamembership_zipcode{
		width: 30% !important;
	}
	#dm_dsamembership_city{
		width: 69% !important;
	}
/* 	========= box styling */
	.dm_dsanewmember_questionbox, .dm_dsanewmemberdfl_questionbox{
		right: 2%;
	}
	/* Becomemember */
	#dm_dsanewmember_becomememberinfo {
	    right: 20%;
	    width: 50%;
	}
	
	/* Membertype */
	#dm_dsanewmember_membertypeinfo{
		width: 60%;
	}
	
	/* Local department */
	
	
}
@media screen and (max-width: 425px){
	
/* 	======== Error and succes messages for checkEmail */
	#dm_dsanewmember_message, #dm_dsaalreadymember_message{
		width: 90%;
	    top: 10%;
	    left: 5%;
	}
	
		#dm_dsanewmember_message{
			top: 25%;
		}
	#dm_dsaalreadymember_message{
		font-size: 17px;
	}
	#dm_dsanewmember_submitmessages{
		width: 90%;
		right: 5%;
	}
/* ========== Content headline */
	#content h1{
		font-size: 20px;
		margin: 10px 20px;	
	}
/* 	========= container headline */
	#dm_dsanewmember_container h2{
		font-size: 18px;
	}
/* 	========= input fields size */
	#dm_dsamembership_zipcode, .dm_dsamembership_flex, #dm_dsamembership_city, .dm_dsamembership_firstinput, .dm_dsamembership_secondinput, #dm_dsacheckEmail_btn{
		width: 100% !important;
	}
/*  ========= questionmark and input*/
	.dm_dsanewmemeber_questioninput{
		width: 85% !important;
		display: inline-block;
	}
	.dm_dsanewmember_questionmark, .dm_dsanewmember_check{
		margin-left: 2%;
		padding: 5px 11px;
	}
/* 	========= box styling */

	/* Becomemember */
	#dm_dsanewmember_becomememberinfo {
	   right: 2%;
	    width: 75%;
	}
	
	/* Membertype */
	#dm_dsanewmember_membertypeinfo{
		width: 90%;
		right: 5%;
	}
	
	/* Local department */
	#dm_dsanewmember_localDepartment{
		width: 75%;
	}
	
	/* Uni-login */
	#dm_dsanewmember_unilogin{
		width: 75%;
	}
}
@media screen and (max-width: 375px){
	label[for=zzz_becomeMember] {
		font-size: 17px;
	}
/* 	========= box styling */
	/* Membertype */
	#dm_dsanewmember_becomememberinfo{
		width: 95%;
		right: 2.5%;
	}
	
	#dm_dsanewmember_membertypeinfo, #dm_dsanewmember_localDepartment, #dm_dsanewmember_unilogin {
		width: 100%;
	    right: 0;
	}
}
@media screen and (max-width: 320px){
/* 	========= box styling */
	.dm_dsanewmember_questionbox, .dm_dsanewmemberdfl_questionbox {
		width: 100%;
	    right: 0;
	}
	/* Membertype */
	#dm_dsanewmember_membertypeinfo{
		top: 122px;
	}
	#dm_dsanewmember_membertypeinfo ul{
		margin: 5px 0 !important;
	}
		
	/* Uni-login */
	#dm_dsanewmember_unilogin{
		width: 80%;
	}
	.dm_dsanewmemeber_questioninput {
    	width: 84% !important;
    }

}