.wrapper {
  background: #404040 !important;
}

.content-wrapper {
  background: #f1f1f1 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}


.loginboxContainer {
  min-width: 650px;
}

.loginboxContainer .box {
  /*border-top : 0;*/
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-direction: row;
  border: 1px solid #ddd;
  box-shadow: none !important;
}


.logoBox {
  /*height: 100%;*/
  background: #2C2D76;
  padding: 0;
  flex-grow: 0;
  display:flex;
  position: relative;
}

.logoBox img.logoBg {
    max-width: 250px;
}
.logoBox img.logoName {
    max-width: 250px;
    position: absolute;
    top: 0;
    padding: 20px;
}

.loginBox {
    /*height: 100%;*/
    background: #fff;
    padding: 0;

    min-width:450px;
    flex-grow: 1000;
    display:inline-block;
}

.loginBox .box-body {
  padding: 0 20px;
}

.loginBox .box-header {
  background: #F5F5F5;
  padding-bottom: 0;
  margin-bottom: 20px;
}


.loginBox label {
  color: #333;
  font-size: 90%;
  font-weight: normal;
}

.loginBox input {
  padding: 5px;
  height: 38px;
}

.loginBox button {
  padding: 5px;
  height: 38px;
}



.loginBox .box-header .box-title {
    padding: 10px;
    /*border-bottom: 2px solid #6875E2;*/
}

.re-bg-purple-light {
    background-color: #6875E2;
}

.text-white {
    color: #fff !important;;
}

@media (max-width:780px) {
  .loginboxContainer {
    min-width: 100%;
    padding: 10px;
  }
  .loginboxContainer > .box {
    flex-direction: column;
  }
  .logoBox {
    max-height: 100px;
    display: flex;
  }

  .logoBox img.logoBg {
    max-width: 100%;
  }
  .loginBox {
    min-width: 100%;
  }

  .loginBox button {
    width: 100%;
  }
}

@media (max-width:480px) {
  .logoBox img.logoBg {
    display: none;
  }
 .logoBox img.logoName {
   max-width: 100%;
   position: static;
 }
}