@charset "utf-8";
/* CSS Document */
@import "reset.css";
@import "font.css";

/* Normal layout */
html:not([dir="rtl"]) {
	--xxlarge-size: 22px;
	--xlarge-size: 20px;
	--large-size: 18px;
	--normal-size: 16px;
	--small-size: 15px;
}

/* RTL layout */
html[dir="rtl"] {
	--xxlarge-size: 23px;
	--xlarge-size: 21px;
	--large-size: 19px;
	--normal-size: 17px;
	--small-size: 16px;
}

a {text-decoration:none; color:#333;}
a:hover {text-decoration: underline;}

/*
	# LAYOUT ###################
*/
body
{
	font-family: Arial, Tahoma, Geneva, sans-serif;
	font-size: var(--normal-size);
	line-height: 1.5;
	color: #2e2e2e;
	background-color: #39b6d6;
	background-image: url(../images/bglogin_page.png);
	background-repeat: no-repeat;
	background-position: center center;
	padding: 0px;
}

html, body {
	height: 100%;
}

.flex-box {display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; padding: 20px;}

.overallBox {display: block; width: 580px; max-width: 96%; /*margin: 80px auto 0 auto;*/}
.errorMsg {color: #FF0000;}

#wrapper {display: block}

#wrapper1 {
	width: 520px;
	max-width: 96%;
	/* position:relative; */
    background-color: #f8fafa;
    border-radius: 40px;
    padding: 1px;
}

.nav {background-color: #4c9ad1; text-align: center; border-top-left-radius: 40px; border-top-right-radius: 40px;
	font-family: Verdana;
	font-size: var(--xxlarge-size);
	font-weight: bold;
	padding: 11px 5px;
	color: #fff;
}
.content { display: block; padding: 30px 40px 10px 40px;}
.content ul li {clear: both; display: block; margin-bottom: 12px; text-align: left; overflow: auto;}
.content ul li span {display: block;}
.content ul li.row_button {clear: both; padding: 20px 0 10px 150px; text-align: left;}
.content ul li.row_pwd {padding-top: 10px; border-top: #E0E0E0 1px solid;}
.content ul li.row_pwd span {float: right; display: block; margin-right: 5px;}
.content ul li.center {text-align: center;}
.content i {color: #808080; padding-right: 6px;}
.content i.fa-keyboard {padding-right: 2px;}
.content .loginForm {margin-top: 20px;}

.label-name {float: left; display: block; width: 150px; padding-top: 9px;}
.imgcode-input {float: left; display: block; width: 154px;}
.imgcode-image {float: left; display: block; padding-left: 10px;}
.imgcode-image img {height: 42px; border-radius: 20px; opacity: 0.9; margin: 0; padding: 6px; border: #ACACAC 1px solid;}
.copyright {font-size: var(--small-size); color:#f2f2f2; padding: 10px 0; margin-top: 25px; display: block; /*position: absolute; bottom: 5px;*/ text-align: center; width: 100%;}
.copyright a {color:#f2f2f2;}
/*.copyright1 {color:#f2f2f2; margin-top: 130px;}*/
.imgCode {height: 34px; border-radius: 20px; opacity: 0.9; margin: 4px 0 0 0;}

input[type="text"], input[type="password"] {width: 280px; max-width: 100%; padding: 10px 15px; border: #ACACAC 1px solid; border-radius: 18px; font-size: inherit;}
input[type="checkbox"] {vertical-align: baseline;}

input[type="submit"], input[type="button"] {background-color: #7EAA0F; color: #fff; font-size: var(--large-size); border: none; padding: 10px 30px; cursor: pointer; border-radius: 20px;
	-webkit-transition: background 0.3s linear;
	-moz-transition: background 0.3s linear;
	-ms-transition: background 0.3s linear;
	-o-transition: background 0.3s linear;
	transition: background 0.3s linear;
	min-width: 160px;
	max-width: 100%;
}
input[type="submit"]:hover, input[type="button"]:hover {background-color: #73880a;}

.center {text-align: center;}


/* RTL layout --------------------- */
html[dir="rtl"] {direction: rtl;}
html[dir="rtl"] i.fa {
  transform: scaleX(-1); /* Flips the icon horizontally */
}
html[dir="rtl"] .label-name {float: right;}
html[dir="rtl"] .content ul li {text-align: right;}
html[dir="rtl"] .content ul li i {padding-right: 0; padding-left: 5px;}
html[dir="rtl"] .imgcode-input {float: right;}
html[dir="rtl"] .imgcode-image {float: right; padding-right: 15px; padding-left: 0;}
html[dir="rtl"] .content ul li.row_button {clear: both; padding-right: 150px; padding-left: 0; text-align: right;}
html[dir="rtl"] .content ul li.row_pwd span {float: left;}
/* End RTL ------------------------ */


/* Small Devices */
@media only screen and (max-width : 760px) {
	.nav {font-size: var(--large-size);}

	.content {}
	.content ul li {text-align: center; margin-bottom: 15px;}
	.content ul li.row_button {padding: 10px 0 0 0; margin-bottom: 10px; text-align: center;}
	.content ul li.row_pwd {text-align: left; border: 0; padding-top: 5px;}
	.content ul li.row_username span {display: block; width: 100%;}
	.content ul li.row_username input {width: 90%;}

	input[type="text"], input[type="password"], input[type="submit"], input[type="button"] {min-width: 0; width: 100%;}
	.imgcode-input {float: left; display: block; width: calc(100% - 127px);}

	.copyright {display: none;}
	.mobile-hidden {display: none !important;}
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 460px) {
	.content {padding: 10px 30px 10px 30px;}

	.imgcode-input {width: 100%; margin-bottom: 5px;}
	.imgcode-image {float: none; margin: 0 auto; padding: 0;}

	.content ul li.row_pwd label, .content ul li.row_pwd span {float: none; display: block; text-align: center; padding-top: 6px;}
}

@media only screen and (min-width : 760px) {
    ::-webkit-input-placeholder { /* WebKit browsers */
        color: transparent;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
       color: transparent;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
       color: transparent;
    }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
       color: transparent;
    }

    textarea::-webkit-input-placeholder { /* WebKit browsers */
        color: transparent;
    }
    textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
       color: transparent;
    }
    textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
       color: transparent;
    }
    textarea:-ms-input-placeholder { /* Internet Explorer 10+ */
       color: transparent;
    }
}