/* secure.heartmath.com */

html { height: 100%; }
body {
  height: 100%;
  margin: 0;
  background: rgb(195,31,100);
  background: linear-gradient(180deg, rgba(195,31,100,1) 0%, rgba(107,45,139,1) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.bi-circle-fill { color: #ccc1d3; }
.bi-check-circle-fill { color: #26bf8c; }

.code-digit {
  border: none;
  border-radius: 0.5rem !important;
}

#first_name { display:none !important; }

/***********************
 * ABOVE LOCKED-IN *
 */

 /* Modal */
 .modal-header {
  justify-content: center;
 }

/* Content */
.parrent-content{
  min-height: 800px;
}
.main-content {
  width: 450px;
}

/* Buttons */
.btn-purple {
  color: #ffffff;
  background: #6b2d8b;
}
.btn-blue {
  color: #ffffff;
  background: rgb(42 184 223);
}
.btn-round {
  border-radius: 20px;
  width: 100%;
}

/* Forms */
.input-light-purple {
  background: #f3eef6;
}
.input-light-red {
  background: #fdf2f7;
}

.correct {
  border: 2px solid green;
  -webkit-box-shadow: -1px 6px 8px 1px rgba(0,96,1,0.57); 
  box-shadow: -1px 6px 8px 1px rgba(0,96,1,0.57);
}

.correct-text {
  color: green !important;
}

.incorrect {
  border: 2px solid red !important;
}

.incorrect-text {
  color: red;
}

/* API and state */

.state-window {
  text-align: left !important;
  list-style-type: none;
}
.session {
  color:#af2674
}
.cookie {
  color: #6b2d8b;
  transition: all .2s;
  cursor: pointer;
}
.cookie:hover {
  background-color: rgba(0, 0, 0, 0.188);
  text-decoration: line-through;
}

/* Color Variation 1 */
.background_gradient_1 {
  border-radius: 0;
  background: rgb(108,46,139);
  background: linear-gradient(5deg, rgba(108,46,139,1) 0%, rgba(198,42,109,1) 100%);
}
.background_radial_gradient_1 {
  background: rgb(228,135,64);
  background: radial-gradient(farthest-corner at 10px 300px, rgb(190,8,62) 0%, rgb(255,223,65) 100%);
}

/* Color Variation 2 */
.background_gradient_2 {
  border-radius: 0;
  background: rgb(52 61 141);
  background: linear-gradient(5deg, rgba(108,46,139,1) 0%, rgb(46 182 222) 100%);
}
.background_radial_gradient_2 {
  background: rgb(35,129,197);
  background: radial-gradient(farthest-corner at 10px 300px, rgb(37,189,140) 0%, rgb(53,112,219) 100%);
}
.background_radial_gradient_2_breath {
    background: rgb(154 171 211);
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgb(85 97 170) 53%, rgb(58 155 206) 100%);
}

/* Color Variation 3 */
.background_gradient_3 {
  border-radius: 0;
  background: rgb(40 185 160);
  background: linear-gradient(5deg, rgb(67 191 214) 0%, rgb(41 192 143) 100%);
}
.background_radial_gradient_3 {
  background: rgb(35,129,197);
  background: radial-gradient(farthest-corner at 10px 300px, rgb(37,189,140) 0%, rgb(53,112,219) 100%);
}
.background_radial_gradient_3_breath {
  background: rgb(255,255,255);
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(27,182,147,1) 53%, rgba(241,251,249,1) 100%);
}


/* Misc Gradient Backgrounds */
.background_gradient_blue_white {
  border-radius: 0;
  background: rgb(58 178 218);
  background: linear-gradient(0, rgb(255 255 255) 0%, rgb(60 179 219) 100%);
}

/* Gradient Text */
.gradient_text_1 {
  color: #af2674;
}

.registrationForm, .loginForm {
     height: 0px;
     transition: opacity .3s ease-in-out;
     overflow: hidden;
     opacity: .1;
}

.activeForm {
     height: auto;
     opacity: 1;
}

.registrationBtn, .loginBtn {
     width: 250px;
     height: 42px;
     background-color: #bd1c77;
     color: white;
     border: 1px solid black;
     border-radius: 5px;
     margin: 10px;
     transition: all .2s;
}

.loginForm h2 {
     margin: 30px 0 5px 0;
}

.loginBtn {
     background-color: #800080;
}

.correct {
     border: 2px solid green;
     -webkit-box-shadow: -1px 6px 8px 1px rgba(0,96,1,0.57); 
     box-shadow: -1px 6px 8px 1px rgba(0,96,1,0.57);
}

.correct-text {
     color: green;
}

.incorrect {
     border: 2px solid red;
}

.incorrect-text {
     color: red;
}

.logo {
     content:url(../img/logo_full.svg);
     max-width: 400px;
     margin: 10px auto;
}

.pre {
     text-align: left;
}

.menu {
     list-style-type: none;
     display: flex;
     transition: all .3s;
     height: 0px;
     overflow: hidden;
}

.menu li {
     margin: 5px;
}

.menu hr {
     margin: 10px 0 0 0;
}

.activeMenu {
     height: 20px;
}

hr {
     width: 72%;
}

#sign_in_btn {
  transition: opacity 0.4s ease;
}

@media (prefers-color-scheme: dark){
  body{
  height: 100vh;
    margin: 0;
    background: rgb(195, 31, 100);
    background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgb(72, 30, 93) 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white !important;
  }
  h5, strong, p, .uploadBtn {
    color: #fff;
  }
  .main-content .card {
    border-color: #b0b0b014;
    background-color: #b0b0b014;
  }
  #sign_in_btn {
    border-color: #080808;
  }
  .modal-content {
    background-color: #000000e3;
  }
}