:root {

  /**
   * colors
   */

  --dark-jungle-green: hsl(188, 63%, 7%);
  --prussian-blue: hsl(200, 69%, 14%);
  --raisin-black-1: hsl(227, 29%, 13%);
  --raisin-black-2: hsl(229, 17%, 19%);
  --yellow-green: hsl(89, 72%, 45%);
  --orange-soda: hsl(9, 100%, 62%);
  --cultured-1: hsl(0, 0%, 93%);
  --cultured-2: hsl(192, 24%, 96%);
  --misty-rose: hsl(7, 56%, 91%);
  --alice-blue: hsl(210, 100%, 97%);
  --seashell: hsl(8, 100%, 97%);
  --cadet: hsl(200, 15%, 43%);
  --white: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 0%);
  --opal: hsl(180, 20%, 62%);

  /**
   * typography
   */

  --ff-nunito-sans: "Nunito Sans", sans-serif;
  --ff-poppins: "Poppins", sans-serif;

  --fs-1: 1.875rem;
  --fs-2: 1.5rem;
  --fs-3: 1.375rem;
  --fs-4: 1.125rem;
  --fs-5: 0.875rem;
  --fs-6: 0.813rem;
  --fs-7: 0.75rem;

  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;

  /**
   * transition
   */

  --transition: 0.25s ease;

  /**
   * spacing
   */

  --section-padding: 100px;

  /**
   * shadow
   */

  --shadow-1: 0 5px 20px 0 hsla(219, 56%, 21%, 0.1);
  --shadow-2: 0 16px 32px hsla(188, 63%, 7%, 0.1);

}


* {
  margin: 0px;
  font-family:"Poppins", sans-serif;
}


.btn-dark-blue {
  color: #fff;
  background-color: #2e1f7a;
  border-color: #2e1f7a;
}

.login-page, .register-page
{
  background:#f9f8f9;
}

.LoginPageInnerContainer {
  display: flex;
  min-height: 100%;
}

.LoginPageInnerContainer .ImageContianer {
  width: 45%;
  background-color: #e1dfec;
  min-height: 100%;
  padding: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.LoginPageInnerContainer .ImageContianer .GroupImage {
  width: 100%;
  display: block;
}

.LoginPageInnerContainer .LoginFormContainer {
  flex-grow: 2;
  background-color: white;
  min-height: 100%;
  padding: 2%;
  background: url(https://i.imgur.com/BKyjjFa.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-bottom:4%;
  background:#f5f5f5;
}

.LoginPageInnerContainer .LoginFormContainer .LogoContainer .logo {
  height: 60px;
  margin-bottom: 30px;
  
}

.LoginPageInnerContainer .LoginFormContainer .header {
  font-size: 24px;
  font-weight: 500;
}

.LoginPageInnerContainer .LoginFormContainer .subHeader {
  color: #9aa4ad;
  margin-top: 5px;
  margin-bottom: 20px;
}

.LoginPageInnerContainer .LoginFormContainer .inputContainer {
  color: #3f3f45;
  margin: 10px 0px;
}

.LoginPageInnerContainer .LoginFormContainer .inputContainer .label {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  margin-right: 7px;
  margin-bottom: 10px;
}

.LoginPageInnerContainer .LoginFormContainer .inputContainer .label .labelIcon {
  width: 20px;
  margin-right: 10px;
  display: block;
}

.LoginPageInnerContainer .LoginFormContainer .inputContainer .input {
  display: block;
  width: calc(100% - 20px);
  font-size: 15px;
  padding: 10px;
  border: 1px solid #d6d7db;
  border-radius: 5px;
  margin-top: 5px;
  outline: 0px !important;
}

.LoginPageInnerContainer .LoginFormContainer .OptionsContainer {
  display: flex;
  justify-content: space-between;
}

.LoginFormContainer {
  display: flex;
  align-items: center;
}

.LoginFormInnerContainer {
  max-width: 500px;
}

.LoginPageInnerContainer .LoginFormContainer .checkbox {
  width: 15px;
  height: 15px;
  margin: 0px;
  display: block;
  border: 1px solid #d6d7db;
  margin-top:-8px;
}

.LoginPageInnerContainer .LoginFormContainer .checkboxContainer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.LoginPageInnerContainer .LoginFormContainer .checkboxContainer label {
  display: block;
  padding: 0px 5px;
  color: #9aa4ad;
}

.LoginPageInnerContainer .LoginFormContainer .ForgotPasswordLink {
  color: #e7483b;
  text-decoration: none;
  font-size:14px;
}

.LoginFormContainer .LoginFormInnerContainer .LoginButton {
  margin-top: 30px;
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: 20px;
  font-weight: bold;
  color: white;
  background-color: #2e1f7a;
  border: 0px;
  outline: 0px;
  cursor: pointer;
}

.LoginFormContainer .LoginFormInnerContainer .LoginButton:active {
  background-color: #4520ff;
}


@media only screen and (max-width: 1200px) {
  .LoginPageInnerContainer .ImageContianer {
      width: 50%;
  }
}

@media only screen and (max-width: 800px) {
  .LoginPageInnerContainer .ImageContianer {
      display: none;
  }
  .LoginPageInnerContainer .LoginFormContainer {
    padding:5%;
  }

  .LoginFormContainer {
      justify-content: center;
  }
}
::-webkit-scrollbar {
  width: 5px;
  background: #2e1f7a;

}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #2e1f7a;
}

::-webkit-scrollbar-thumb:hover {
  background: #4520ff;
}

.sign {
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
}

.sign-up {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 416px;
  color:#333;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 24px;
  margin-top: 24px;
}
.sign-up::after, .sign-up::before {
  content: " ";
  display: inline-block;
  width: 30%;
  height: 1px;
  background-color: #ccc;
}

.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo-container img {
    max-width: 100px;
}
.mainlogo {
    width: auto;
    height:100px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.vidyalogo {
    width: auto;
    height:100px;
    margin-top: 10px;
    margin-bottom: 10px;
}


.mainheading {
    font-size: 20px;
    font-weight: 700;
    margin-top: 15px;
    color: #b52932;
    margin-left:10px;
    margin-right:10px;
}
.subheading {
    font-size: 18px;
    font-weight: 700;
    margin-top: -20px;
    color: #b52932;
}