*, ::after, ::before {
box-sizing: border-box;
}

html,body{
height: 100vh;
color: #323232;
font-size: 12pt;
font-family:'Segoe UI', calibri, sans-serif !important;
margin: 0px!important;
overflow: auto;
overscroll-behavior-y: contain;
}

body {
    background: url('../img/LoginPattern.png') top left repeat, url('../img/LoginHRbg.jpg') top left no-repeat;
    background-attachment: fixed;
    background-position: top left;
    -webkit-background-size: auto,cover;
    -moz-background-size: auto,cover;
    -o-background-size: auto,cover;
    background-size: auto,cover;
}

.firstdiv{
width:800px;
/* background: url('../img/hrConnectionBGSmall.png'); */
background:url('../img/hrConnectionBGSmall.png') , url('../img/hrConnectionBGSmallAnim (1).gif') ;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: auto,auto;    
-moz-background-size: auto,auto;    
-o-background-size: auto,auto;    
background-size: auto,auto;
}


.bottomwheel{
display: block;
margin-left: 12px;
margin-top: -1px;
}

.spin{
-webkit-animation:spin 24s linear infinite 0s;
-moz-animation:spin 24s linear infinite 0s;
animation:spin 24s linear infinite 0s;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.loginparent {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width:100%;
/* width: 100vw; */
height: 73vh;
margin-top: 10%;
flex-flow: column;
}

.loginbox {
/* background: url('../img/hrConnectionBGSmall.png'); */
/* background-color: white; */
background-repeat: no-repeat;
background-position: center;
height: 540px;
display: flex;
width: 100%;
position: relative;
margin-top: -10%;
justify-content: center;
}

.firstanimation {
margin-top: 200px;
position: absolute;
margin-left: 67px;
}

.secondanimation {
margin-top: 205px;
position: absolute;
margin-left: 669px;
}

.thirdanimation {
margin-top: 298px;
position: absolute;
margin-left: 140px;
}

.fourthanimation{
margin-top: 167px;
position: absolute;
margin-left: 564px;
}

.fifthanimation {
margin-top: 299px;
position: absolute;
margin-left: 633px;
}

.sixthanimation {
margin-top: 220px;
position: absolute;
margin-left: 155px;
opacity: 0.6;
}

.seventhanimation  {
margin-top: 229px;
position: absolute;
margin-left: 542px;
opacity: 0.6;
}

.eightanimation {
margin-top: 337px;
margin-left: 218px;
position: absolute;
opacity: 0.6;
}

.ninthanimation {
position: absolute;
margin-top: 279px;
margin-left: 510px;
opacity: 0.6;
}

.tenthanimation {
position: absolute;
margin-top: 230px;
margin-left: 183px;
opacity: 0.6;
}

.eleventhanimation{
position: absolute;
margin-top: 234px;
margin-left: 597px;
opacity: 0.6;
}

.loginhtml {
height: 500px;
width: 410px;
background: white;
text-align: center;
border-radius: 10px;
box-shadow: 0px 5px 20px 8px rgba(0, 0, 0, 0.05);
margin-top: 1%;
}

.logincontrol {
background: #fff;
border: 2px solid #e1e1e1;
outline: none;
box-shadow: none;
transition: all .3s;
padding: 8px 12px 8px 50px;
border-radius: 4px;
width: 100%;
height: 50px;
}

.loginicon{
position: absolute;
bottom: 16px;
left: 12px;
}

.detailcontrol{
position: relative;
margin-bottom: 12px;
}

.button{
background: linear-gradient(#925db9,#632f93);
color: #FFFFFF;
border: none;
text-align: center;
padding: 10px 12px;
transition: all 0.5s;
cursor: pointer;
width: 100%;
box-shadow: none;
border-radius: 4px;
height: 50px;
}

.toplabel {
color: black;
}

.formbox{
margin-left: 75px;
margin-right: 75px;
}

.loginimg{
margin-top: 43px;
margin-bottom: 43px;
}

.inputtext {
text-align: center;
font-size: 12px;
margin-left: 40px;
margin-right: 40px;
color: #999999;
margin-bottom: 10px;
}

.successicon {
margin-bottom: 15px;
}

.footertext {
width: 100%;
display: flex;
position: fixed;
bottom: 5px;
justify-content: flex-end;
padding-right: 15px;
right: 0;
align-items: center;
}

.footertext>div {
color: #fff;
display: flex;
flex-grow: 1;
justify-content: left;
font-size: 9pt;
padding-left: 100px;
font-weight: 500;
margin-bottom: 0px;
opacity: 0.8;
}

.modal-header {
float: left;
display: block;
color: #fff;
background-image: linear-gradient(to right, #76449a, #eb4e3f);
margin-top: -1px;
}

.btncss {
text-align: center;
position: relative;
display: inline-block;
overflow: hidden;
width: 100%;
max-width: 120px;
height: 48px;
margin-top: 20px;
text-transform: uppercase;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
line-height: 46px;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.btn_primary {
border: 1px solid #3aa33a;
color: #fff !important;
background: #3aa33a;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}

.btn_primary:hover {
border: 1px solid #3aa33a;
color: #000 !important;
background-color: transparent; 
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}


.modal{
z-index: 9999;
}

@media (max-width:991px){
.hidden-xs{
display:none!important;
}
.mobilefooter {
bottom: 0px;
position: absolute;
font-size: 14px;
width: 100%;
color: #fff;
text-align: center;
}
.mobileloginview {
height: 100vh;
text-align: center;
}
.mobilelogin .loginhtml{
width: 379px;
margin:0px auto;
margin-top: 70px !important;

}
.mobilelogin {
padding: 20px;
}
}
@media (min-width:992px) and (max-width:1199px){
.hidden-md{
display:none!important;
}
}
@media (min-width:1200px){
.hidden-lg{
display:none!important;
}
}
@media (min-width:992px) and (max-width:1150px){
.firstdiv {
width: 550px;
background-size: contain;
}
.firstanimation {
margin-top: 212px;
position: absolute;
margin-left: 12px;
}
.imgwidth{
    width:80%;
}
.secondanimation {
    margin-top: 213px;
    position: absolute;
    margin-left: 482px;
}
.thirdanimation {
    margin-top: 289px;
    position: absolute;
    margin-left: 67px;
}
.fourthanimation {
    margin-top: 187px;
    position: absolute;
    margin-left: 404px;
}
.fifthanimation {
    margin-top: 291px;
    position: absolute;
    margin-left: 459px;
}
.sixthanimation {
    margin-top: 227px;
    position: absolute;
    margin-left: 77px;
    opacity: 0.6;
}
.seventhanimation {
    margin-top: 232px;
    position: absolute;
    margin-left: 386px;
    opacity: 0.6;
}
.eightanimation {
    margin-top: 318px;
    margin-left: 128px;
    position: absolute;
    opacity: 0.6;
}
.ninthanimation {
    position: absolute;
    margin-top: 274px;
    margin-left: 362px;
    opacity: 0.6;
}
.tenthanimation {
    position: absolute;
    margin-top: 259px;
    margin-left: 181px;
    opacity: 0.6;
}
.eleventhanimation {
    position: absolute;
    margin-top: 234px;
    margin-left: 427px;
    opacity: 0.6;
}
.loginhtml{
    width: 375px;
    margin-left: 15px;
}
}