﻿.login_content select {
    margin: 0px;
   /* width: 345px;*/
   width:100%;
    border: none;
   /* box-shadow: inset 0px 0px 10px 0px #353535b0;*/
  
  /*  background-color: #eee;*/
    height: 46px;
    padding: 0 15px;
	border-radius:22px !important;
}
.login_content select:focus {
    margin: 0px;
   /* width: 345px;*/
    border: none;
   /* box-shadow: inset 0px 0px 10px 0px #f06671 !important;*/
    
   /* background-color: #eee;*/
    padding: 0 15px;
}
.form-control {
    background-color: #131218 !important;
    color: #fff !important;
}

input#Button1 {
    width: 100px!important;
    background: #009946 !important;
    color: #fff;
    font-weight: bold;
    /*margin-top: 20px !important;*/
}

.login_content input {
    margin: 0px !important;
  /*  width: 345px !important;*/
    /*width:100% !important;*/
    border: none !important;
/*    box-shadow: inset 0px 0px 10px 0px #353535b0 !important;*/
  color:#fff !important;
    background-color: #131218 !important;
    height: 46px;
    padding: 0 15px;
	border-radius:22px !important;
	
	box-shadow:none !important;
}
.login_content input:focus {
    margin: 0px !important;
  /*  width: 345px;*/
    border: none !important;
/*    box-shadow: inset 0px 0px 10px 0px #f06671 !important;*/
    /*border-radius: 4px !important;*/
  /*  background-color: #eee;*/
    padding: 0 15px;
}
.login_content .login_inputs {
    margin: 15px 0 0;
    display: inline-block;
    min-width: unset;
    width: 25%;
}

.login_content {
	text-align: left !important;
	min-width:unset !important;
}
.login_content input#btnLogin {
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    font-weight: 600;
    background: #009946 !important;
  /*  box-shadow: inset -2px -5px 5px #8d3c42 !important;*/
    font-size: 25px;
    height: 46px;
 /*   padding: 0px 5px 5px;*/
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: #fff !important;
    text-transform: uppercase;
    display: inline-block !important;
    letter-spacing:1;
}
.login_content {
    display: inline-block;
}
/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #131218 inset !important;
}
/*Change text in autofill textbox*/
input:-webkit-autofill{
    -webkit-text-fill-color: #fff !important;
}
#wrapper {
    max-width: 100% !important;
    width: 100%;
    float: left;
    background-color: #fff;
    margin: 0px !important;
}
#wrapper div#login {
    /* background-color: #fff; */
    padding: 7% 0;

    background-size: cover;
    background-repeat: no-repeat;
  /*  background-color: #46c9ac;*/
  background-image:url('../../images/login-form.jpg') !important;
  height:100vh;
}
#wrapper div#login::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-color: #00000069;
   /* background-color: #46c9ac;*/
   
}


#login section.login_content {
    /*width: 400px;
    padding: 0px;*/
	 background-color: #26272c;
    padding: 50px 25px;
    box-sizing: border-box;
    border:2px solid #009946;
    border-radius:40px;
}
.container-login {
    width: 90%;
    margin: 0 auto;
}

html, body {
    background-color: #fff !important;
}
.login_content h1 {
    color: #1A82C3;
    font-size: 45px !important;
    text-shadow: none;
    font-weight: 600 !important;
    margin: 0 0 35px !important;
    width: 100%;
    float: left;
    text-transform: uppercase;
    letter-spacing: 5px !important;
	text-align:center;
}
.login_content form {
    margin: 0px !important;
    /* background-color: #ffffff9c; */
   /* padding: 25px;
      background-image: url(../../images/back_blur.jpg);*/
    background-size: cover;
    /*background-color: #26272c;
    padding: 50px 25px;
    box-sizing: border-box;
    border:2px solid #009946;
    border-radius:40px;*/
    
}
.login_content h1:before, .login_content h1:after {
 display:none;
}
input#txtPos {
    margin-top: 10px !important;
}
.keboard-side {
    float: left;
    width: 100% !important;
    /*background: #26272c;
    border: 2px solid #009946;
    border-radius: 40px;*/
}

.keyboard-div {
    float: left;
    width: 100%;
    padding: 10px 0; 
    border: unset;
    box-sizing: border-box;
    border-radius: 5px;
    margin-left: 3px;
    overflow: hidden;
}
.alpha-key {
    float: left;
    width: 100%;
    overflow: hidden;
    text-align: center;
}
.alpha-key button {
    width: 9.5%;
    margin-right: 0;
    font-size: 22px;
    border-radius: 4px;
    height: 46px;
}
button#enter-btn {
    /*width: 64% !important;*/
    border-radius: 4px;
}
.special-keys {
    float: left;
    width: 100%;
    padding-right: 5px;
    box-sizing: border-box;
}
button#bk-btn {
    width: 100%;
}
button#space-btn {
    width: 100%;
}
button#del-btn {
    width: 100%;
}
button#close-btn {
    width: 100%;
}
.num-keys {
    float: left;
    width: 20%;
}
.num-keys button {
    width: 31% !important;
}
.qutery-key {
    float: left;
    width: 80%;
}
.special-keys button {
    width: 14% !important;
    text-align: center;
}
div#dvmasterkey {
    width: 100%;
    text-align: center;
}
div#dvlocation {
	width:100%;
	text-align: center;
}
/*--responsive--*/
@media(max-width:767px) {
	#wrapper div#login {
		height: unset;
	}
	.login_content .login_inputs {
		width: 35%;
	}
	.login_content input#btnLogin {
		font-size: 20px;
	}
	.login_content h1 {
		font-size: 40px !important;
		margin: 0 0 0px !important;
	}
}
@media(max-width:567px){
	.login_btn_div {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 10px;
	}
}
@media(max-width:480px)
{
    #login section.login_content {
        width: 100%;
    }
    #wrapper div#login
    {
        height:unset;
    }
    .login_content {
        min-width: unset !important;
    }
	.qutery-key {
		width: 100%;
	}
	.num-keys {
		width: 100%;
	}
	div#dvlocation {
		text-align: left;
	}
	.login_content input#btnLogin {
		font-size: 18px;
	}
	.special-keys button {
		width: 11% !important;
		text-align: center;
	}
	.num-keys button {
		width: 25% !important;
	}
	.login_content .login_inputs {
		width: 100%;
	}
	.alpha-key button {
		width: 18%;
		font-size:14px;
		padding:0;
		text-align:center;
	}
	button#bk-btn {
		width: 24% !important;
	}
	button#space-btn {
		width:16% !important;
	}
	#tbmasterkey, input#txtPos {
		width: 49% !important;
	}
	input#Button1 {
		margin-top: 5px !important;
	}
	.login_content.login_btn_div {
		padding-top: 10px;
	}
	.login_content input, .login_content input#btnLogin {
		height: 40px;
	}
}
@media(max-width:370px){
	.alpha-key button {
		width: 18%;
	}
	button#bk-btn {
		width: 30% !important;
	}
	button#space-btn {
		width: 19% !important;
	}
	.special-keys button {
		width: 15% !important;
	}
}
@media(min-width:481px) and (max-width:567px) {
	.login_content .login_inputs {
		width: 32%;
	}
	#login section.login_content {
		padding: 50px 5px;
	}
	div#dvlocation {
		text-align: center;
	}
	.qutery-key {
		width: 75%;
	}
	.num-keys {
		width: 25%;
	}
	.num-keys button {
		width: 30% !important;
		padding: 0;
		text-align: center;
	}
	button#close-btn {
		width: 63% !important;
	}
	.alpha-key button {
		padding: 0;
		text-align: center;
		font-size:15px;
	}
	.alpha-key button {
		width: 11.5%;
	}
	button#enter-btn {
		width: 18%;
	}
	button#bk-btn {
		width: 28% !important;
	}
	button#space-btn {
		width: 14% !important;
	}
	.special-keys button {
		width: 11% !important;
	}
	.login_content .login_inputs {
		width: 49%;
	}
	div#dvlocation {
		text-align: left;
	}
	#tbmasterkey, input#txtPos {
		width: 49% !important;
	}
	input#Button1 {
		margin-top: 5px !important;
	}
}
@media(min-width:568px) and (max-width:667px) {
	#login section.login_content {
		padding: 50px 5px;
	}
	.qutery-key {
		width: 75%;
	}
	.num-keys {
		width: 25%;
	}
	div#dvlocation {
		text-align: center;
	}
	/*.login_content .login_inputs {
		width: 32.6%;
	}*/
	.alpha-key button {
		width: 9%;
		font-size: 14px;
		height: 46px;
		padding: 0;
	}
	button#bk-btn {
		width: 20% !important;
	}
		#tbmasterkey, input#txtPos {
		width: 49% !important;
	}
	input#Button1 {
		margin-top: 5px !important;
	}
}
@media(min-width:668px) and (max-width:767px) {
	
	#login section.login_content {
		padding: 50px 20px;
	}
	.alpha-key button {
		width: 9%;
		font-size: 17px;
		padding: 0;
	}
	button#close-btn {
		width: 40% !important;
	}
		#tbmasterkey, input#txtPos {
		width: 49% !important;
	}
	input#Button1 {
		margin-top: 5px !important;
	}
}

@media(min-width:768px){
	.login-row{
		display:flex;
		align-items:center;
	}
}
@media(min-width:768px) and (max-width:991px) {
	.alpha-key button {
		width: 8.5%;
	}
	button#enter-btn {
		width: 11% !important;
		font-size: 17px;
	}
	.special-keys button {
		text-align: center;
		padding: 0;
		font-size: 14px;
	}
	button#close-btn {
		font-size: 17px;
		width: 65% !important;
	}
}
@media(min-width:992px) and (max-width:1024px) {
	.alpha-key button {
		width: 9%;
	}
	button#enter-btn {
		font-size: 20px;
		padding: 0;
		text-align: center;
	}
	.special-keys button {
		text-align: center;
		padding: 0;
		font-size: 18px;
	}
	button#close-btn {
		width: 100%;
		width: 64% !important;
	}
}
@media(min-width:1025px) and (max-width:1100px) {
	.alpha-key button {
		width: 9%;
	}
	button#enter-btn {
		padding: 0;
	}
	.special-keys button {
		padding: 0;
		font-size: 20px;
	}
	button#close-btn {
		width: 40% !important;
		padding: 0;
	}
}
@media(min-width:1101px) and (max-width:1300px) {
	.special-keys button {
		text-align: center;
		padding: 0;
	}
	button#close-btn {
		padding: 0;
	}
}

/*for big screens*/
@media(min-width:1600px){
	.login_content h1 {
		font-size: 5rem !important;
	}
	.login_content input {
		font-size: 1.8rem !important;
	}
	.login_content input#btnLogin {
		font-size: 2.6rem !important;
		height: 46px;
		line-height: 46px;
		position: relative;
		top: -5px;
	}
	.alpha-key button {
		font-size: 2.4rem;
		height: 50px;
	}
}
@media(min-width:1700px){
	.login_content h1 {
		font-size: 5.2rem !important;
	}
	.login_content input {
		font-size: 2rem !important;
	}
	.login_content input#btnLogin {
		font-size: 2.8rem !important;
	}
	.alpha-key button {
		font-size: 2.6rem;
		height: 55px;
	}
}
@media(min-width:1900px){
	.login_content h1 {
		font-size: 5.4rem !important;
	}
	.login_content input {
		font-size: 2.2rem !important;
	}
	.login_content input#btnLogin {
		font-size: 3rem !important;
	}
	.alpha-key button {
		font-size: 2.8rem;
		height: 60px;
	}
}
@media(min-width:2560px){
	.container-login {
		display: flex;
		align-items: center;
		justify-content: center;
		height: calc(100vh - 45%);
	}
	.login_content h1 {
		font-size: 5.6rem !important;
	}
	.login_content input {
		font-size: 2.4rem !important;
		height: 50px;
	}
	.login_content input#btnLogin {
		font-size: 3.2rem !important;
		height: 50px !important;
	}
	.alpha-key button {
		font-size: 3rem;
		height: 65px;
	}
}
@media (min-width: 3280px) {
	.login_content h1 {
		font-size: 5.8rem !important;
	}
	.login_content input {
		font-size: 2.8rem !important;
		height: 55px;
	}
	.login_content input#btnLogin {
		font-size: 3.6rem !important;
		height: 55px !important;
	}
	.alpha-key button {
		font-size: 3.4rem;
		height: 70px;
	}
}
@media (min-width: 3840px) {
	.login_content h1 {
		font-size: 6rem !important;
	}
	.login_content input {
		font-size: 3rem !important;
		height: 60px;
	}
	.login_content input#btnLogin {
		font-size: 3.8rem !important;
		height: 60px !important;
	}
	.alpha-key button {
		font-size: 3.6rem;
		height: 75px;
	}
}