/*Include Lato Fonts*/
@font-face {
  font-family: 'lato_thin';
  src: url('../admin_assets/dist/fonts/Lato-Light.ttf');
}

@font-face {
  font-family: 'lato_regular';
  src: url('../admin_assets/dist/fonts/Lato-Regular.ttf');
}

@font-face {
  font-family: 'lato_bold';
  src: url('../admin_assets/dist/fonts/Lato-Bold.ttf');
}


* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: lato_regular;
  font-size: 1.6rem;
  background: url(../admin_assets/static_assets/curve-top.png) no-repeat;
}

.content-wrapper {
    width: 100%;
    height: 100%;
}

.fullScreen {
  width: 90vw;
  margin: 45px auto;
  height: calc(100vh - 90px);
  box-shadow: 1px 1px 10px rgba(0,0,0,0.3);
  background-color: white;
}

.fullScreen > div {
  min-height: 100%;
}

.logoDetail {
  flex-basis: 55%;
  background: linear-gradient(to right, rgb(0 158 255 / 0.8), rgb(237 47 75 / 0.8)),
              url(../admin_assets/static_assets/loginBg1.jpg);
  background-size: cover;
  position: relative;
  clip-path: polygon(15% 0, 100% 0%, 100% 100%, 0% 100%);
}


.logoDetail > div {
  min-height: 100%;
}

.logoDetail p {
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: white;
    padding: 0.25rem 1rem;
}

.ig-btn-field {
  font-size: 1.5rem;
  background-color: #F7F7F7;
  /*padding: 2rem 1rem;*/
}

.logoDetail > div > p {
  font-weight: 700;
}

.loginDetail {
  flex-basis: 45%;
}

.loginDetail > div {
  min-height: 100%;
}

.signInForm {
  min-width: 370px;
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 0.25rem;
  padding: 1rem 0 2rem;
}

.sign-in-box {
  background: linear-gradient(to right, #01a0fe, #ec2f4d);
  padding: 2px;
  border-radius: 0.4rem;
}

.signInForm h1 {
  font-size: 3rem;
  color: #2a4f96;
  display: inline-block;
  background: linear-gradient(to right, #01a0fe, #ec2f4d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.signInForm .form-control:focus {
    box-shadow: none;
}

.input-group-text {
  background-color: #2a4f96;
  color: white;
  font-size: 1.5rem;
  padding: 1rem 1.3rem;
}

.loginBtn {
  padding: 0.75rem 3rem;
  background-color: #ffffff;
  font-size: 1.5rem;
  color: #2a4f96;
  border-radius: 100px;
  border-color: #2a4f96;
  position: relative;
  transition: all ease 0.2s;
}

.loginBtn:hover {
  background-color: #2a4f96;
  color: white;
}

.forgotPassword {
  color: #2a4f96;
  text-decoration: underline;
}

input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

label.rememberMeLabel {
  position: relative;
  display: inline-block;
  padding: 0 0 0 2em;
  height: 1.5em;
  line-height: 1.5;
  cursor: pointer;
}

label.rememberMeLabel::before, label.rememberMeLabel::after {
  position: absolute;
  top: 2px;
  left: 0;
  display: block;
  width: 1.3em;
  height: 1.3em;
}

label.rememberMeLabel::before {
  content: " ";
  border: 1px solid #2a4f96;
  border-radius: 20%;
}

/* Checkbox */
input[type="checkbox"] + label.rememberMeLabel::after {
  content: "\2714";
  color: #ffffff;
  line-height: 1.2;
  text-align: center;
}

/* :checked */
input[type="checkbox"]:checked + label.rememberMeLabel::before {
  background: #2a4f96;
  border-color: #2a4f96;
  color: #fff;
}

input[type="checkbox"] + label.rememberMeLabel::after {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}

input[type="checkbox"]:checked + label.rememberMeLabel::after {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

/* Transition */
label.rememberMeLabel::before,
label.rememberMeLabel::after {
  -webkit-transition: .25s all ease;
  -o-transition: .25s all ease;
  transition: .25s all ease;
}
















/*Media Queries starts here*/
@media only screen and (max-width: 991px) {
  .fullScreen {
    width: 95vw;
    margin: 25px auto;
    height: calc(100vh - 50px);
  }
  .loginDetail {flex-basis: 55%;}
  .logoDetail {flex-basis: 45%;}
}


@media only screen and (max-width: 768px) {
  .loginDetail {flex-basis: 100%;}
  .logoDetail {display: none;}
  .fullScreen {
    width: 100%;
    height: 100vh;
    margin: 0;
  }
  .logoDetail > div, .loginDetail > div {min-height: auto;}
  .logoDetail, .loginDetail {padding: 15px;}
  .logoDetail > div > p {margin-bottom: 0;}
  .logoDetail img {width: 10rem;}
  body {
    background: none;
  }
}

@media only screen and (max-width: 576px) {
  html {font-size: 53%;}
  .signInForm { min-width: 300px; }
}