/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0px;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow:auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
	padding: 30px 0 0; 
}

/* Modal Content/Box */
.modal-content {
    background-color: #1b242c;
    margin: 0 auto; /* 5% from the top, 15% from the bottom and centered */
    width: 30%; /* Could be more or less, depending on screen size */
	padding: 0 5% 5%; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;
}

.modal-register-body{ width:100%; margin: 0 auto; padding-bottom: 0px}
.modal-headline{width:100%; float: left; font-size: 18px; line-height: 36px; margin: 30px 0; text-align: center; color:#ffa200}
.modal-headline h2{margin:0; padding: 0}
.modal-headline img{ width: 120px}
.modal-content p { width: 100%; margin:10px 0 15px; line-height: 18px}
.ckbox-left{ float:left; margin: 3px 5px 0 0}
.ckbox-right{ float:left}

.pop-reg-btn{ padding:7px 15px; background-color: orange; color: white; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
 text-decoration: none} 
.pop-reg-btn a{ text-decoration: none; color: white}

/* The Close Button */
.modal .close {
font-size: 42px; font-weight: lighter; /*padding:15px;*/ line-height: 18px; top: 30px; right: 0px; position: relative; float: right; color: #fff; /*background-color: #b81d12;*/ opacity: 1; z-index: 999999999
}
.modal .close:hover,
.modal .close:focus {
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}
.tnc-font-size{ font-size:11px; color: #7A7A7A}

/* The Close Button (x) */
.close {
    position: absolute;
    right: 10px;
    top: 0px;
    color: #000;
    font-size: 40px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}

/* Clear floats */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.inputs table {
	width:100%; padding: 0; margin: 0px; margin-bottom: 0px;
     color: white!important; border-collapse: collapse
}
.inputs tr td {
	padding: 0 0 15px; color: #cccccc;
}
.inputs p { line-height: 18px; color: #cccccc; margin: 5px 0 0; padding: 0}
.inputs a { color: #ccc; text-decoration: none}
.inputs span { color: #ffa200}
.pop-tf{ width: 94%; font-size: 14px; background-color:#d1d3d5; color: #0d141b; border: none; padding: 3%; -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.pop-tf:focus{outline: none}
.pop-tf::-webkit-input-placeholder { /* Chrome/Opera/Safari */
 font-size: 14px
}
.pop-tf::-moz-placeholder { /* Firefox 19+ */
  font-size: 14px
}
.pop-tf:-ms-input-placeholder { /* IE 10+ */
  font-size: 14px
}
.pop-tf:-moz-placeholder { /* Firefox 18- */
  font-size: 14px
}
.forgotpass:hover{ color: #ffa200; text-align: center}
.pop-btn{width: 100%; background-color: #ffa200; padding: 10px 0px; margin-top: 10px; color: black!important; border: none; font-size: 18px; font-weight: bold; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px; cursor: pointer; -moz-transition: all .3s ease-in; -o-transition: all .3s ease-in; -webkit-transition: all .3s ease-in;transition: all .3s ease-in}
.pop-btn a{text-decoration: none; color: black}
	.pop-btn:hover{background-color: #b81d12; color: white!important}
	.pop-btn-gray{background-color: #b7b9bb; padding: 10px 50px; margin-top: 10px; color: black!important; border: none; font-size: 14px; -webkit-border-radius: 3px;
-moz-border-radius: 3px;border-radius: 3px; cursor: pointer; -moz-transition: all .3s ease-in; -o-transition: all .3s ease-in; -webkit-transition: all .3s ease-in;transition: all .3s ease-in}
	.pop-btn-gray:hover{background-color: #b81d12; color: white!important}

/* CHECKBOX */
.ckbox {
  display: block;
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

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

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: #eee;-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

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

/* When the checkbox is checked, add a blue background */
.ckbox input:checked ~ .checkmark {
/*  background-color: #2196F3;*/
}

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

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

/* Style the checkmark/indicator */
.ckbox .checkmark:after {
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid #b81d12;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}



.signup-textfield{ width: 100%;
    padding: 7px 10px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box; font-size: 14px}
.verify-textfield{ width: 40%;
    padding: 7px 10px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box; font-size: 14px}
.fieldbox button {
    background-color:deepskyblue;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%; font-size: 14px
}
/* Extra styles for the cancel button */
.cancelbtn {
    padding: 14px 20px;
    background-color: lightgray;
}

/* Float cancel and signup buttons and add an equal width */
.cancelbtn,.signupbtn {float:left;width:50%}

/* Add padding to container elements */
.fieldbox {
    padding: 15px; color: #5F5F5F; font-size: 14px
}
.fieldbox ul { width:100%; float: left; margin: 0; padding: 0; list-style: none}
.fieldbox ul li { width:46%; float: left; margin: 0 0 5px; padding: 0 4px; list-style: none; font-size: 12px}

	
@media only screen and (max-width : 420px) {
.modal {
    top: 0px; padding: 0px 0 0; 
}
.modal-content {
    width: 90%; /* Could be more or less, depending on screen size */
	padding: 0 5% 60px 5%;
}
.modal-headline{ margin: 50px 0 30px;}
.register {
	font-size: 12px; line-height: 21px
}
.inputs table {
	padding: 0; margin-top: 20px; margin-bottom: 30px;
}
.inputs tr td {
	padding-bottom: 12px;
}
.pop-tf{ width: 90%; font-size: 15px; padding: 13px 5%}
.pop-tf:focus{outline: none}
.pop-tf::-webkit-input-placeholder { /* Chrome/Opera/Safari */
 font-size: 14px
}
.pop-tf::-moz-placeholder { /* Firefox 19+ */
  font-size: 14px
}
.pop-tf:-ms-input-placeholder { /* IE 10+ */
  font-size: 14px
}
.pop-tf:-moz-placeholder { /* Firefox 18- */
  font-size: 14px
}
.pop-btn{font-size: 18px; padding: 10px 0px; margin-top: 10px}

}
.err {
  color: red;
  font-weight: bold;
}

/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
    .cancelbtn, .signupbtn {
       width: 100%;
    }
}