/* @import url("https://fonts.googleapis.com/css?family=Open+Sans:400+700");
:root {
  --bg-color-1: black;
  --bg-color-2: #ffffff;
  --bg-color-3: #ff8c00;
  --color-1: #333333;
  --color-2: #ffffff;
}



.login-page {
    min-height: 88.6vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    box-sizing: border-box;
    position: relative;
}

.login-page:after {
  content: "";
  position: absolute;
  z-index: -1;
  display: block;
  height: 100%;
  width: 100%;
  background: url('../img/banner2.jpg') center no-repeat;
  animation: zoom 10s both;
}

@keyframes zoom {
  0% {
    background-size: 180%;
  }
  100% {
    background-size: 150%;
  }
}
img {
  max-width: 100%;
}

///////////// LOGO //////////////
.logo {
  /* background: var(--bg-color-3); */
  /* padding: 1rem;
  max-width: 7rem;

  margin-right: auto;
}

.logo__symbol {
  display: block;
  margin-right: auto;
  margin: 0 auto 1rem auto;
  max-width: 80%;
}

.logo__text {
  font-size: .8rem;
  line-height: 1.2;
  text-align: center;
  font-weight: normal;
  letter-spacing: .2rem;
  color: var(--color-2);
  text-transform: uppercase;
} */ */

/*////////// LOGIN BUTTON ////////////*/
/* .button {
  padding: 4px 19px;
  color: #015093;
  text-align: center;
  margin-bottom: auto;
  font-size: 27px;
  border: 1px solid #76797e;
}
.login-button{
  margin-top: 67%;
}
.button:hover {
  cursor: pointer;
  
} */

/*//////////// FORM LAYOUT ////////////////*/
/* .form__header {
    background-color: #76797e;;
    color: var(--color-2);
    padding: .8rem 0;
    text-align: center;
    font-weight: 700;
    font-size: 30px;

} */
/* a.close {
  position: absolute;
  z-index: 999; */
  /* right: auto; */
  /* right: 23%;
  top: 14%;
  opacity: 100;
}
a.close span{
  color: #fff;
} */
/* .form__link--text {
  color: var(--color-1);
  font-size: 2rem;
}

.form__item {
    background-color: var(--bg-color-2);
    padding: 2rem 5rem;
    margin-top: -.1rem;
    margin-left: -38px;
} */


/* .form__item:first-child {
  padding-top: 5rem;
}

.form__item:last-child {
  padding-bottom: 5rem;
}

.form__item input {
    font-size: 2rem;
    padding: 0.8rem;
    width: 100%;
} */

/* .form__item #submit {
    background: transparent;
    color: #005091;
    padding: 0.6rem;
    display: block;
    width: 100%;
    border: none;
    text-transform: uppercase;
    border: 1px solid #46b8da;
    font-size: 25px;
    font-weight: 700;
} */

/*///////// OVERLAY AND FORM POSITIONING //////////*/
/* .form-wrapper {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
     transform: translate(-50%, -50%);
    transform: translate(-50%, -7%);
    width: 116%;
    background: #00000063; 
     height: 100%;
    padding: 10% 32% 29%;
}

.overlay {
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
 background: black center; 
} */

/*/////// FORM ANIMATION ////////////*/
/* @keyframes folding {
  100% {
    transform: rotateX(0deg);
  }
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: .7;
  }
}
#css-toggle {
  display: none;
} */

/* .form-wrapper {
  perspective: 500px;
}

#css-toggle:checked ~ .form-wrapper{
  z-index: 1001;
  background: #1c201e73;
  width: 143%;
}

.folding--effect {
  transform: rotateX(180deg);
  transform-origin: top;
  backface-visibility: hidden;
}

#css-toggle:checked ~ .form-wrapper .folding--effect {
  animation: folding .2s forwards;
}

#css-toggle:checked ~ .overlay {
  animation: fade 0.5s forwards;
  z-index: 1000;
  width: 100%;
  height: 100%;
} */

/*/////// FORM ANIMATION PERFORMANCE ////////*/
/* .button:hover ~ .form-wrapper .folding--effect {
  will-change: transform;
}

.button:hover ~ .overlay {
  will-change: opacity;
} */

/*////////// RESPONSIVE STYLES ////////////*/
/* @media (max-width: 720px) {
  .logo {
    margin-right: initial;
  }

  .button {
    margin-bottom: initial;
  }
}
@media (max-width: 450px){
a.close {
    position: absolute;
    z-index: 999;
    /* right: auto; */
    /* right: 24%;
    top: 9%;
}
.form__item {
  background-color: var(--bg-color-2);
  padding: 2rem 2rem;
  margin-top: -.1rem;
  margin-left: -38px;
}
.form__header {
 
  font-size: 22px;
}
.form__item input {
  font-size: 14px;
}
.form__item #submit{
  font-size: 18px;
}
.form__link--text {
  color: var(--color-1);
  font-size: 18px;
}
} */ 

/** CONTAINER **/
#login-container {
  position: relative;
  float: left;
  width: 100%;
  height: 100vh;

  background: transparent; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(
    circle,
    #c4d9b2 -10%,
    #ebf2e5 60%,
    transparent 90%
  ); /* Safari 5.1-6.0 */
  background: -o-radial-gradient(
    circle,
    #c4d9b2 -10%,
    #ebf2e5 60%,
    transparent 90%
  ); /* For Opera 11.6-12.0 */
  background: -moz-radial-gradient(
    circle,
    #c4d9b2 -10%,
    #ebf2e5 60%,
    transparent 90%
  ); /* For Firefox 3.6-15 */
  background: radial-gradient(
    circle,
    #c4d9b2 -10%,
    #ebf2e5 60%,
    transparent 90%
  ); /* Standard syntax */
  perspective: 600px;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  -o-perspective: 600px;
  -ms-perspective: 600px;
}
/** CONTAINER **/

/** CARD **/
.card {
  width: 375px;
  height: 450px;
  margin: 0 auto;
  /* margin-top: calc(50vh - 225px); */
  transform-style: preserve-3d;
  transition: transform 1s;
  transform-origin: center center;
  background: transparent;
  border: none;
}

.card .card-content {
  position: relative;
  width: 100%;
  height: 100%;

  background: #FFF; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(
    -60deg,
    #FFF -50%,
    #ebf2e5 150%
  ); /*Safari 5.1-6*/
  background: -o-linear-gradient(
    -60deg,
    #fff-50%,
    #ebf2e5 150%
  ); /*Opera 11.1-12*/
  background: -moz-linear-gradient(
    -60deg,
    #fff-50%,
    #ebf2e5 150%
  ); /*Fx 3.6-15*/
  background: linear-gradient(-60deg, #fff-50%, #ebf2e5 150%); /*Standard*/

  transition: 0.5s ease-out;
  -webkit-transition: 0.5s ease-out;
  -moz-transition: 0.5s ease-out;
  -o-transition: 0.5s ease-out;
  -ms-transition: 0.5s ease-out;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;

  /* content backface is visible so that static content still appears */
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  -moz-backface-visibility: visible;
  -o-backface-visibility: visible;
  -ms-backface-visibility: visible;
}

.card.flipped .card-content {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
}

.card .card-content .card-front,
.card .card-content .card-back {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 20px;
  border: 2px solid #015093;
  background: #fff;
}

.card.flipped .card-content .card-front,
.card .card-content .card-back {
  /* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -ms-backface-visibility: visible;
  position: absolute;
}

.card .card-content .card-front,
.card.flipped .card-content .card-front {
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
}

.card .card-content .card-back,
.card.flipped .card-content .card-back {
  transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
}

.card .card-content .card-front,
.card.flipped .card-content .card-back {
  /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
  animation: stayvisible 0.5s both;
  -webkit-animation: stayvisible 0.5s both;
  -moz-animation: stayvisible 0.5s both;
  -o-animation: stayvisible 0.5s both;
  -ms-animation: donothing 0.5s;
  -ms-transition: visibility 0s linear 0.17s;
  visibility: visible;
}
.card.flipped .card-content .card-front,
.card .card-content .card-back {
  /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
  animation: stayvisible 0.5s both;
  -webkit-animation: stayvisible 0.5s both;
  -moz-animation: stayvisible 0.5s both;
  -o-animation: stayvisible 0.5s both;
  -ms-animation: donothing 0.5s;
  -ms-transition: visibility 0s linear 0.17s;
  visibility: hidden;

  background: #fff; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(
    -60deg,
    #fff-50%,
    #ebf2e5 150%
  ); /*Safari 5.1-6*/
  background: -o-linear-gradient(
    -60deg,
    #fff-50%,
    #ebf2e5 150%
  ); /*Opera 11.1-12*/
  background: -moz-linear-gradient(
    -60deg,
    #fff-50%,
    #ebf2e5 150%
  ); /*Fx 3.6-15*/
  background: linear-gradient(-60deg, #fff-50%, #ebf2e5 150%); /*Standard*/
}
@keyframes stayvisible {
  from {
    visibility: visible;
  }
  to {
    visibility: visible;
  }
}
@-webkit-keyframes stayvisible {
  from {
    visibility: visible;
  }
  to {
    visibility: visible;
  }
}
@-moz-keyframes stayvisible {
  from {
    visibility: visible;
  }
  to {
    visibility: visible;
  }
}
@-o-keyframes stayvisible {
  from {
    visibility: visible;
  }
  to {
    visibility: visible;
  }
}
@-ms-keyframes donothing {
  0% {
  }
  100% {
  }
}
/** CARD **/

/** LOGIN SIDE **/
#login-container .login-side {
}

.main-title-container {

}
.login-side  form  input{
  border: 0px !important;
  background: #f3f2f3!important;
  padding: 21px !important;
  margin: 14px 0px;
  border-radius: 10px !important;
  font-size: 17px !important;
}
.login-postion h2{
  font-size: 54px;
  font-weight: 800;
}

.recover-password-side form input{
  border: 0px !important;
  background: #f3f2f3!important;
  padding: 21px !important;
  margin: 14px 0px;
  border-radius: 10px !important;
  font-size: 17px !important;
}

.recover-password-side form{
  margin-top: -10%;
}
.input-group {
  margin-bottom: 10px;
}

.input-group-addon {
  width: 40px;
  border: 1px solid #4c7927;
  background-color: #4c7927;
  color: #ebf2e5;
  font-weight: bold;
  text-align: center;
  margin-right: -1px;
}

.input-group-addon + input {
  border: 1px solid #4c7927;
}

.help-block {
  position: relative;
  float: left;
  color: red;
  width: 250px;
  max-width: 250px;
}

.flip-card {
  cursor: pointer;
    color: #015093 !important;
    font-weight: bold;
    font-size: 17px;
    margin: 26px 0px
}

.main-title-container {
  color: #015093  !important;
  font-weight: bold;
  font-size: 36px;
  font-family: Verdana, Geneva, sans-serif;
  margin: 40px -15px 20px;
}
.reset-password-tittle{
  font-size: 31px !important;
}

.text-secondary-dark {
  color: #4c7927;
}

.spin-animation {
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
}
/** LOGIN SIDE **/

/** RECOVER PASSWORD SIDE **/

/** RECOVER PASSWORD SIDE **/

.flex-column-list {
  display: flex;
  flex-flow: column wrap;
  justify-content: between;
}

.flex-column-list > div:first-of-type {
  flex: 1 0 auto !important;
}

.flex-column-list > form {
  flex: 1 0 auto !important;
}

.flex-column-list > div:last-of-type {
  flex: 0 0 auto !important;
}

.pull-right {
  float: right;
}
.login-btn{
  
  width: 100% !important;
  height: 43px !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  margin: 12% 0px 0px !important;
}
.btn-primary {
  background-color: #015093  !important;
  border-color: #015093  !important;
  cursor: pointer !important;
}

.btn-primary:hover {
  background-color: #015093 !important;
  border-color: #015093 !important;
}

.no-padding {
  padding: 0;
}