/*
	Replace Color 
	#3f2b56 -> #5E4481
	#5b3e7b - >#917DAA
*/
@font-face { font-family: 'Roboto'; src: url('../fonts/Roboto-Thin.ttf') format('truetype'); font-weight:100; font-style:normal; }
@font-face { font-family: 'Roboto'; src: url('../fonts/Roboto-Light.ttf') format('truetype'); font-weight:300; font-style:normal; }
@font-face { font-family: 'Roboto'; src: url('../fonts/Roboto-Regular.ttf') format('truetype'); font-weight:normal,400;  font-style:normal; }
@font-face { font-family: 'Roboto'; src: url('../fonts/Roboto-Bold.ttf') format('truetype'); font-weight:700,bold; font-style:normal; }
.card-container.card, .card-logo.card-container.card{ padding: 20px 20px 25px 20px; text-align: left; }
@media only screen and (max-width: 485px) {  .card-container.card, .card-logo.card-container.card { max-width: 90%; } }
@media only screen and (max-width: 99999px) { .card-container.card { max-width:85%; } .card-logo.card-container.card { max-width:475px; } } 
body, html { height: 100%; background-color: white; font-family: Roboto; font-size: 16px; color: #555; line-height: 1.6em; -webkit-font-smoothing: antialiased;	-webkit-overflow-scrolling: touch; background: url(../images/bg.png); background-size: cover; background-position: center center; background-repeat: no-repeat repeat; }
h1,h2,h3, h4, h5, h6 { font-family: 'Roboto', sans-serif; color:#000; /*color:#3f2b56;*/ }
h1 { font-size: 40px; }
h2, h3 { font-weight: 330; }
h4 { font-weight: 370; font-size: 20px;  }
h5, h6{ font-weight: 300; }
#wrapper { text-align: center; background-attachment: relative; background-position: center center; padding-top: 25px; min-height: 200px; width: 100%; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
#wrapper h1 { margin-top: 5px; margin-bottom: 20px; font-size: 45px; font-weight: 700; letter-spacing: -1px; text-align: center; }
.card { background-color: #F7F7F7; padding: 5px; margin: 10px auto 25px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3); box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3); }
.form-signin{ margin: 15px 0px 0px 0px; }
.form-signin input[type=text], .form-signin input[type=password]{  font-size:16px; color:#000; /*color:#3f2b56;*/  }
.form-control::placeholder { color: #bbb; font-size:16px; font-weight: normal; text-decoration: none; opacity: 0.7; }
.form-control::-webkit-input-placeholder { color: #bbb; font-size:16px; font-weight: normal; text-decoration: none; opacity: 0.7; }
.form-control::-moz-placeholder { color: #bbb; font-size:16px; font-weight: normal; text-decoration: none; opacity: 0.7; }
.form-control:-ms-input-placeholder { color: #bbb; font-size:16px; font-weight: normal; text-decoration: none; opacity: 0.7; }
.form-control:-moz-placeholder { color: #bbb; font-size:16px; font-weight: normal; text-decoration: none; opacity: 0.7; }
.form-signin .input-group { position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: stretch; align-items: stretch; width: 100%; }
.form-signin .input-group-append { margin-left: -1px; }
.form-signin .input-group-append, .form-signin  .input-group-prepend { display: -ms-flexbox; display: flex; }
.form-signin .input-group-text{ padding-left: 6px; padding-right: 6px; }
.form-signin .form-control:focus { border-color: rgb(104, 145, 162); outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162); box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162); }

/*.btn-purple { color:  #fff; background-color: #5E4481; border-color: #5b3e7b;   background-image: linear-gradient(#5E4481, #5E4481); cursor: pointer; padding: 0px; font-weight: 700; font-size: 18px; height: 45px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: none;	-o-transition: all 0.218s; -moz-transition: all 0.218s; -webkit-transition: all 0.218s; transition: all 0.218s; margin: 10px 0px 10px 0px; width: 100%; }
.btn-purple:hover, .btn-purple:active, .btn-purple:focus { color:  #fff; background-color: #917DAA; border-color: #5E4481;   background-image: linear-gradient(#917DAA, #917DAA); cursor: pointer; }
.btn-purple-modal { color:  #fff; background-color: #5E4481; border-color: #917DAA;   background-image: linear-gradient(#5E4481, #5E4481); cursor: pointer; padding: 0px 15px 0px 15px; font-weight: 700; font-size: 18px; height: 45px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: none;	-o-transition: all 0.218s; -moz-transition: all 0.218s; -webkit-transition: all 0.218s; transition: all 0.218s; margin: 10px 0px 10px 0px; }
.btn-purple-modal:hover, .btn-purple-modal:active, .btn-purple-modal:focus { color:  #fff; background-color: #917DAA; border-color: #5E4481;   background-image: linear-gradient(#917DAA, #917DAA); cursor: pointer; }*/

.btn-purple { color:  #fff; background-color: #000; border-color: #222;   background-image: linear-gradient(#000, #222); cursor: pointer; padding: 0px; font-weight: 700; font-size: 18px; height: 45px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: none;	-o-transition: all 0.218s; -moz-transition: all 0.218s; -webkit-transition: all 0.218s; transition: all 0.218s; margin: 10px 0px 10px 0px; width: 100%; }
.btn-purple:hover, .btn-purple:active, .btn-purple:focus { color:  #fff; background-color: #222; border-color: #444;   background-image: linear-gradient(#222, #444); cursor: pointer; }
.btn-purple-modal { color:  #fff; background-color: #000; border-color: #222;   background-image: linear-gradient(#000, #222); cursor: pointer; padding: 0px 15px 0px 15px; font-weight: 700; font-size: 18px; height: 45px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: none;	-o-transition: all 0.218s; -moz-transition: all 0.218s; -webkit-transition: all 0.218s; transition: all 0.218s; margin: 10px 0px 10px 0px; }
.btn-purple-modal:hover, .btn-purple-modal:active, .btn-purple-modal:focus { color:  #fff; background-color: #222; border-color: #444;   background-image: linear-gradient(#222, #444); cursor: pointer; }

.btn-secondary-modal { color:  #666; background-color: #e1e1e1; border-color: #d4d4d4;   background-image: linear-gradient(#e1e1e1, #e1e1e1); cursor: pointer; padding: 0px 15px 0px 15px; font-weight: 700; font-size: 18px; height: 45px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: none;	-o-transition: all 0.218s; -moz-transition: all 0.218s; -webkit-transition: all 0.218s; transition: all 0.218s; margin: 10px 0px 10px 8px; }
.btn-secondary-modal:hover, .btn-secondary-modal:active, .btn-secondary-modal:focus { color:  #fff; background-color: #d4d4d4; border-color: #e1e1e1;   background-image: linear-gradient(#d4d4d4, #d4d4d4); cursor: pointer; }
.err{ padding: 10px 0px 0px 0px; color:red; font-weight: 300; font-size: 18px; }
.authDetail{ padding: 15px 0px 15px 0px; color: #5E4481; }
.copyright{ padding: 5px 15px 25px 15px; text-align: center; }
.modal-footer{ padding: 0px 35px 0px 0px; border-top: 0px; }
@media (max-width: 3600px) {
	/*#idLogo{ height: 10vw; }*/
	#idLogo{ height: 9vw; }
}
@media (max-width: 1600px) {
	/*#idLogo{ height: 11vw; }*/
	#idLogo{ height: 10vw; }
}
@media (max-width: 1400px) {
	/*#idLogo{ height: 13vw; }*/
	#idLogo{ height: 12vw; }
}
@media (max-width: 1280px) {
	/*#idLogo{ height: 15vw; }*/
	#idLogo{ height: 13vw; }
}
@media (max-width: 1080px) {
	/*#idLogo{ height: 20vw; }*/
	#idLogo{ height: 17vw; }
}
@media (max-width: 800px) {
	/*#idLogo{ height: 25vw; }*/
	#idLogo{ height: 21vw; }
}
@media (max-width: 650px) {
	/*#idLogo{ height: 30vw; }*/
	#idLogo{ height: 28vw; }
	#username-email{ font-size: small; }
	#idLoginText{ font-size: small; }
	#idTitle{ font-size: large; }
	#idSubTitle{ font-size: medium; }
	#idCopyright{ font-size: medium; }
}
@media (max-width: 568px) {
	/*#idLogo{ height: 35vw; }*/
	#idLogo{ height: 31vw; }
	#username-email{ font-size: x-small; }
	#idLoginText{ font-size: small; }
	#idTitle{ font-size: medium; }
	#idSubTitle{ font-size: small; }
	#idCopyright{ font-size: x-small; }
}
@media (max-width: 414px) {
	/*#idLogo{ height: 38vw; }*/
	#idLogo{ height: 34vw; }
	#username-email{ font-size: small; }
	#idLoginText{ font-size: small; }
	#idTitle{ font-size: x-large; }
	#idSubTitle{ font-size: large; }
	#idCopyright{ font-size: small; }
}
@media (max-width: 411px) {
	/*#idLogo{ height: 38vw; }*/
	#idLogo{ height: 34vw; }
	#username-email{ font-size: x-small; }
	#idLoginText{ font-size: small; }
	#idTitle{ font-size: large; }
	#idSubTitle{ font-size: medium; }
	#idCopyright{ font-size: small; }
}
@media (max-width: 375px) {
	/*#idLogo{ height: 38vw; }*/
	#idLogo{ height: 34vw; }
	#username-email{ font-size: x-small; }
	#idLoginText{ font-size: small; }
	#idTitle{ font-size: large; }
	#idSubTitle{ font-size: medium; }
	#idCopyright{ font-size: x-small; }
}
@media (max-width: 360px) {
	/*#idLogo{ height: 35vw; }*/
	#idLogo{ height: 32vw; }
	#username-email{ font-size: xx-small; }
	#idLoginText{ font-size: small; }
	#idTitle{ font-size: medium; }
	#idSubTitle{ font-size: small; }
	#idCopyright{ font-size: x-small; }
}
@media (max-width: 320px) {
	/*#idLogo{ height: 30vw; }*/
	#idLogo{ height: 28vw; }
	#username-email{ font-size: xx-small; }
	#idLoginText{ font-size: x-small; }
	#idTitle{ font-size: medium; }
	#idSubTitle{ font-size: small; }
	#idCopyright{ font-size: x-small; }
}
@media (max-width: 280px) {
	/*#idLogo{ height: 32vw; }*/
	#idLogo{ height: 29vw; }
	#username-email{ font-size: xx-small; font-weight: normal; font-family: san-serif, tahoma; }
	#idLoginText{ font-size: xx-small; font-weight: normal; font-family: san-serif, tahoma; }
	#idTitle{ font-size: medium; }
	#idSubTitle{ font-size: small; }
	#idCopyright{ font-size: xx-small; font-weight: normal; font-family: san-serif, tahoma; }
}