/*------------------------*/
/*   Estilos Login        */
/*                        */
/*------------------------*/
/*custom font*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/
* {
  margin: 0;
  padding: 0;
}


body {
  font-family: 'Montserrat', arial, verdana;
}

/*DIV AUTH METHOD*/
.auth_method {
  border: 1px solid antiquewhite;
  padding: 10px;
  margin: 5px;
}

/* Checkbox Styles */
input[type="checkbox"] {
  -webkit-appearance: none;
  outline: none;
  /*position: absolute;*/
  height: 5rem;
  width: 10rem;
  border: 5px solid var(--body);
  border-radius: 2.5rem;
  cursor: pointer;
  box-shadow: 9px 9px 16px rgba(189, 189, 189, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5), inset 10px 10px 15px -10px #c3c3c3, inset -10px -10px 15px -10px #fff;
  /* Toggle Indicator */
  /* Label */
  /* Checked Styles */
}

@media (prefers-color-scheme: light) {
  input[type="checkbox"] {
    box-shadow: 9px 9px 16px rgba(189, 189, 189, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5), inset 10px 10px 15px -10px #c3c3c3, inset -10px -10px 15px -10px #fff;
  }
}

@media (prefers-color-scheme: dark) {
  input[type="checkbox"] {
    box-shadow: -8px -4px 8px 0px rgba(255, 255, 255, 0.05), 8px 4px 12px 0px rgba(0, 0, 0, 0.5), inset -4px -4px 4px 0px rgba(255, 255, 255, 0.05), inset 4px 4px 4px 0px rgba(0, 0, 0, 0.5);
  }
}

input[type="checkbox"]::before {
  content: "";
  height: 3.125rem;
  width: 3.125rem;
  background-color: var(--body);
  /*position: absolute;*/
  margin: auto;
  top: 0;
  left: 0.9375rem;
  bottom: 0;
  border-radius: 50%;
  box-shadow: 7px 7px 15px #c3c3c3, 9px 9px 16px rgba(189, 189, 189, 0.6);
  transition: 0.15s;
}

@media (prefers-color-scheme: light) {
  input[type="checkbox"]::before {
    box-shadow: 7px 7px 15px #c3c3c3, 9px 9px 16px rgba(189, 189, 189, 0.6);
  }
}

@media (prefers-color-scheme: dark) {
  input[type="checkbox"]::before {
    box-shadow: -8px -4px 8px 0px rgba(255, 255, 255, 0.05), 8px 4px 12px 0px rgba(0, 0, 0, 0.5);
  }
}

input[type="checkbox"]::after {
  content: "Off";
  /*position: absolute;*/
  font-size: 1.625rem;
  top: 1.25rem;
  right: 1.5625rem;
  color: var(--text-secondary);
  font-family: "SF Pro Text", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  letter-spacing: 0.004em;
}

input[type="checkbox"]:checked {
  background: #0abb5a;
}

@media (prefers-color-scheme: light) {
  input[type="checkbox"]:checked {
    box-shadow: 9px 9px 16px rgba(189, 189, 189, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5), inset 10px 10px 15px -10px #09a878, inset -10px -10px 15px -10px #018b3b;
  }
}

input[type="checkbox"]:checked::before {
  left: 5.3125rem;
  box-shadow: none;
}

input[type="checkbox"]:checked::after {
  content: "On";
  left: 1.5625rem;
  color: #f5f5f7;
}

/*form styles*/
#msform {
  width: 550px;
  margin: 50px auto;
  text-align: center;
  position: relative;
}

#msform fieldset {
  background: white;
  border: 0 none;
  border-radius: 3px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  padding: 20px 30px;
  box-sizing: border-box;
  width: 80%;
  margin: 0 10%;

  /*stacking fieldsets above each other*/
  position: relative;
}

/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
  display: none;
}

/*inputs*/
#msform input,
#msform textarea {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  font-family: montserrat;
  color: #2C3E50;
  font-size: 13px;
}

/*buttons*/
#msform .action-button {
  width: 100px;
  background: #AE1616;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 1px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 10px 5px;
}

#msform .action-button:hover,
#msform .action-button:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}

/*headings*/
.fs-title {
  font-size: 15px;
  text-transform: uppercase;
  color: #2C3E50;
  margin-bottom: 10px;
}

.fs-subtitle {
  font-weight: normal;
  font-size: 13px;
  color: #666;
  margin-bottom: 20px;
}

/*progressbar*/
#progressbar {
  margin-bottom: 30px;
  overflow: hidden;
  /*CSS counters to number the steps*/
  counter-reset: step;
}

#progressbar li {
  list-style-type: none;
  color: white;
  text-transform: uppercase;
  font-size: 9px;
  width: 33.33%;
  float: left;
  position: relative;
}

#progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 20px;
  line-height: 20px;
  display: block;
  font-size: 10px;
  color: #333;
  background: white;
  border-radius: 3px;
  margin: 0 auto 5px auto;
}

/*progressbar connectors*/
#progressbar li:after {
  content: '';
  width: 100%;
  height: 2px;
  background: white;
  position: absolute;
  left: -50%;
  top: 9px;
  z-index: -1;
  /*put it behind the numbers*/
}

#progressbar li:first-child:after {
  /*connector not needed before the first step*/
  content: none;
}

/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,
#progressbar li.active:after {
  background: #27AE60;
  color: white;
}

.logo_login {
  display: block;
  color: transparent;
  width: 100%;
  height: 100%;
  /*float: left;*/
  background: url('../img/logo1.jpg') no-repeat scroll 0px 0px transparent;
  margin-top: 15%;
  /*margin-left: 13%;*/
}

#content_logo {
  display: block;
  text-align: center;
  width: 380px;
  height: 96px;
  margin: 0 auto;
  /*margin-right: 25%;*/
  margin-bottom: 4%;
}

.oculto {
  display: none;
}

/* NOTIFICACIONES */
.bar {
  padding: 10px;
  margin: 10px;
  color: #333;
  background: #fafafa;
  border: 1px solid #ccc;
}

/* (B) THE VARIATIONS */
.info {
  color: #204a8e;
  background: #c9ddff;
  border: 1px solid #4c699b;
}

.success {
  color: #2b7515;
  background: #ecffd6;
  border: 1px solid #617c42;
}

.warn {
  color: #756e15;
  background: #fffbd1;
  border: 1px solid #87803e;
}

.error {
  color: #ba3939;
  background: #ffe0e0;
  border: 1px solid #a33a3a;
}