@charset "utf-8";
html {min-height: 100%; min-height: 100vh; }
body {min-height: 100%; min-height: 100vh; display: flex; flex-direction: column; font-size: 14px; color: #fff; font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana," sans-serif"; margin: 0;
	background: #333;
	background: -moz-linear-gradient(top, #222222 0%, #333333 99%);
	background: -webkit-linear-gradient(top, #222222 0%,#333333 99%);
	background: linear-gradient(to bottom, #222222 0%,#333333 99%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#333333',GradientType=0 );
}
.top {flex-grow: 0; color: #888; font-size: 13px; text-align: center; padding: 10px 40px;  }
.middle {display: flex; flex-grow: 1; align-items: center; justify-content: center; padding: 40px;  }
.bottom {flex-grow: 0; color: #888; font-size: 13px; text-align: center; padding: 10px 40px;  }
.logo {display:block; margin: 3px 0;  }
.logo img {width: 25px;}
@media screen and (max-width: 700px) {
	.top {padding: 20px;  }
	.bottom {padding: 10px 20px;  }
	.middle { padding: 20px;  }
}

textarea, input, select, button {font-size: 1em; font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana," sans-serif"}
a {color: inherit; text-decoration: underline;} 
a:focus {color: #8d9c0c; outline: none;}
.clear {display: block; clear: both;}
.error {color: #b50000;}
div.error {margin: 5px 0;}	
hr {margin: 20px 0; border: none; height: 1px; background: rgba(255,255,255,0.2);}

			
.centerBox {width: 100%; max-width: 300px; margin: 0 auto; color: #fff;}
.centerBox .title {font-size: 1.2em;}
.centerBox:before {content: ""; display: block; padding-top: 1px; margin-bottom: 20px; }
.centerBox:after {content: ""; display: block; padding-bottom: 1px; margin-top: 20px; }

.messageBox {width: 100%; max-width: 500px; margin: 0 auto; color: #ccc;}
.messageBox .inner  {background: #fff; color: #333; margin: 20px 0; border-radius: 3px;  }
.messageBox .inner:before {content: ""; display: block; padding-top: 1px; margin-bottom: 20px; }
.messageBox .inner:after {content: ""; display: block; padding-bottom: 1px; margin-top: 20px; }
.messageBox .small {font-size: 0.8em; opacity: 0.5;}
.messageBox hr {background: #ccc;}

.newVersion {position: absolute; top: -70px; left: 0; width: 70px; height: 70px; background: url(../images/newVersion.svg) center no-repeat; background-size: contain;}

.alignC {text-align: center;}
.field {margin: 14px 0; }
.field .label {margin-bottom: 5px; }
.field .icon {position: relative; }
.field .icon i {position: absolute; box-sizing: border-box; left: 0; top: 0; height: 100%; width: 40px; text-align: center; background: rgba(255,255,255,0.05); color: #888; border-right: 1px solid #555; padding-top: 10px; }
.field .icon i:before {position: absolute; top: 50%; left: 0; width: 100%; line-height: 0; text-align: center;}
.field .icon input {padding-left: 50px; border-radius: 5px; }
input[type=text], input[type=password], select, textarea  {padding: 10px; width: 100%; box-sizing: border-box; color: #fff; border: 1px solid #555; background: #383838; outline: none  }
textarea {height: 100px;}
input:focus { background: #444;  }

:-webkit-autofill, :-webkit-autofill:hover,  :-webkit-autofill:focus {background: #fff;}

.field.topField {margin-bottom: 0;}
.field.bottomField {margin-top: 0;  } 		
.field.topField input {border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.field.bottomField input {border-top: none; border-top-left-radius: 0; border-top-right-radius: 0;  }
.submitContainer {margin: 20px 0;}
.buttonContainer {margin: 20px 0;}
button, a.button {display: block; box-sizing: border-box; width: 100%; margin: 5px 0; padding: 10px; font-weight: 700; outline: none; cursor: pointer; text-decoration: none; text-align:center;
	border-radius: 3px;
	background: #8d9c0c;
	background: linear-gradient(to bottom, #bcd010 0%, #8d9c0c 100%);
	border: none;
	box-shadow: inset 0 1px 1px rgba(255,255,255,0.8);
	color: #000; font-size: 1.1em; text-shadow: 0px 1px 1px rgba(255,255,255,0.4);
}
button:hover {color: #fff; text-shadow: 0px -1px 1px rgba(0,0,0,0.8)}
button.grey, a.grey {
	background: #ccc;
	background: linear-gradient(to bottom, #ccc 0%, #bbb 100%);
}
button:hover {color: #fff; text-shadow: 0px -1px 1px rgba(0,0,0,0.8)}
			
a.check {position: relative; display: inline-block; width: 20px; height: 20px; border: 1px solid #555; background: #383838; color: transparent; margin-right: 5px; }
a.check i {position: relative; left: 0; width: 100%; text-align: center;}
a.check.checked i {color: #fff;  }
a.check:focus {background: #444; }


.captchaContainer {display: flex; align-items: center; justify-content: space-between; margin: 5px 0; }
.captchaContainer img {width: 45%; width: calc(50% - 5px); height: 41px; }
.captchaContainer input[type=text] {width: 45%!important;  width: calc(50% - 5px)!important; height: auto;  }

.excl {padding-left: 40px; position: relative; }
.excl i {position: absolute; top: 50%; left: 0; font-size: 30px; line-height: 0;}



.modal {position: fixed; display:none; top: 0; left: 0; width: 100%; height: 100%; background:rgba(0,0,0,0.7); z-index: 500; align-items: center; justify-content: center;}
.modal .inner {position: relative; display: block; padding: 15px; box-sizing: border-box; height: auto; color: #333; }
.modal .inner.innerLarge { max-width: 700px;}
.modal .inner a.closeButton {position:absolute; cursor:pointer; top: 0; right: 0; height: 0; width: 30px; color: #fff; padding: 15px 0; text-align: center; background: #888; font-size: 15px; text-decoration: none; line-height: 0; border-radius: 15px; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);}
.modal .inner a.closeButton:hover {background-color:#b50000;}
.modal .inner #modalContent {position: relative; background: #fff; margin: 0 auto; width: 90vw; width:calc(100vw - 80px); max-width: 450px; height: auto; max-height: 90vh; max-height:calc(100vh - 80px); padding: 0 20px; border-radius: 3px; box-sizing: border-box; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75); overflow: auto; }
.modal .inner #modalContent h1 {font-size: 1.5em; margin: 1em 0;}
.modal .inner #modalContent h2 {font-size: 1.1em; margin: 1em 0 5px 0;}
.modal .inner #modalContent p {margin: 5px 0 10px 0;}
.modal .inner .field {margin: 10px 0;}
.modal .inner .buttonContainer {margin: 20px 0;}
.modal .inner .buttonContainer button.right {float: right;}
.modal .inner .buttonContainer a.button.right {float: right;}
.modal .inner .label {margin-bottom: 3px;}
.modal input[type=text], .modal input[type=password], .modal textarea, modal select {width: 100%; }
.modal .inner #modalContent:before {content:""; display:block; padding-top: 1px; margin-bottom: 20px;  }
.modal .inner #modalContent:after {content:""; display:block; padding-bottom: 1px; margin-top: 20px;  }

.modal .inner #modalContent.table {width: auto; max-width: 90vw; max-width:calc(100vw - 80px);border: 5px solid #fff; padding: 0;}
.modal .inner #modalContent.table .basicTable {width: 100%; box-shadow: none; margin: 0;}
.modal .inner #modalContent.table:before {display:none; }
.modal .inner #modalContent.table:after {display:none; }
.modal .inner #modalContent.table {}
.modal .inner #modalContent.large {max-width: 750px; }