/* 
* Style designed by Juan Correia Salaroli
* Licensed for reuse with attribution.
* Profile: https://www.behance.net/juancorreia1
*/

/* Typefaces come from the artifact, never from an external host: a venue that
   blocks outside domains must still render the platform as designed. */
@import url('/plugins/hikari_plugin/assets/fonts.css');

.login-container {
    position: relative;
    background-color: #EFEFEF;
    display: flex;
    margin: 20px;
    padding: 5vh;
    border-radius: 31px;
    max-width: 80vw;
}

.settings-container {
  display: flex;
}

.settings-container > div {
  flex:1;
  margin: 3vh;
}

.box {
  position: relative;
  flex: 1;
}

.login-box {
    margin: 5vh;
    margin-left: 10vh;
    margin-right: 10vh;
}


.jbtn {
    background-color: #3dd33d;
    border: none;
    border-radius: 5px;
    width: 100%;
}

.jbtn-secondary {
    background-color: none;
    border: none;
    border-radius: 5px;
    color: rgb(201, 201, 201);
    padding: 0.5vh;
    padding-right: 2vh;
    padding-left: 2vh;
    background-color: rgb(36, 36, 36);
    transition: color 0.5s;
}

.jbtn-secondary:hover {
    color:white;
    transition: 0.5s;
}
.jform-control {
    background-color: #E0E0E0;
    border-radius:10px;
    padding: 0.6rem;
}

.jform-control > input {
    background:none;
    border:none;
    outline: none;
    width: 100%;
    height: 100%;
    color: #6B6767;
    border-radius: 10px;
}

.jform-control-2 {
  display: block;
  width: 100%;
  border-radius:10px;
  border: 1px solid #282828;
  background-color: white;
}

.jnav {
    color:black;
}

.jnav-link {
    color: black!important;
}

.jimg {
    position: relative;
    width: 100%;
    height: 100%;
}

.imgbox {
    position: relative;
}

/***************************************************************************/
.separator {
    display: flex;
    align-items: center;
    text-align: center;
}   
  
.separator::before,
.separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #868686;
}

.separator:not(:empty)::before {
    margin-right: .80em;
}

.separator:not(:empty)::after {
    margin-left: .80em;
}


#challenge-window {
  

}

.jchallenge {
  position: absolute;
  background-color: #282828;
  min-height: 80vh;
  min-width: 60vw;
  border-radius: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  display: flex;
  outline: 0;
  font-family: "Inter";
  padding: 5vh;
}

.jchallenge > div {

}


.jchall-box1 {
  position: relative;
  margin-right: 2rem;
  height: 100%;
  flex:1;
}

.jchall-box2 {
  position: relative;
  display: flex;
  flex-direction: column; 
  justify-content: space-between;
  flex:1;
}

.jsub-box-2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.jsub-box-2 > span {
  flex: 1;
}

.jchall-title {
  font-weight: bold;
  font-size: 40px;
  margin: 0;
  text-wrap: wrap;
}

.jchall-points {
  font-size: 36px;
  margin: 0;
}

.jchall-description {
  margin-top:3vh;
  text-align: justify;
}

.jchall-description > .jchall-text {
  overflow-y: scroll;
  max-height: 40vh;
  padding-right: 1rem;
}

.jchall-input-form {
  display: flex;
  margin-bottom:2vh;
}

.jchall-attempts {
  
}

.jsearch-form {
  display: flex;
}

.jbig-header {
  text-align: center;
  padding: 5vh;
  background-color: #D9D9D9;
  margin-bottom: 1rem;
}

.jsearch-form > input,
.jsearch-form > select {
  flex: 0.5;
  margin-right: 1vh;
  margin-left: 1vh;
}

.jsearch-form > button {
  flex: 0.2;
  border: none;
  border-radius: 10px;
  color: white;
}


.jchallenge-input {
  outline: none;
  background-color: #454545;
  color: #8F8F8F;
  border-radius: 5px;
  border: none;
  width: 100%;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  margin-right: 1vh;
}

.jchallenge-submit {
  background-color: #2BF22B;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  padding: 0.7vh;
  flex: 0.3;
}

.jchallenge-solves {
  color: white;
  overflow-y: scroll;
  flex: 1;
}

.jchallenge-files {
  margin-top: 3rem;

}

.jchallenge-file {
  text-decoration: none;
  color: white;
  background-color: #454545;
  border-radius: 5px;
  padding: 1vh;
  width: 100%;
  margin-bottom: 1vh;
  margin-left: auto;
  margin-right: auto;
}

.jchallenge-file a {
  text-decoration: none;
  color:white;

}

.jchallenge-hints {
  background-color: #454545;
  border-radius: 5px;
  padding: 1vh;
  margin-bottom: 1vh;
  margin-top:3rem;
  overflow-y: scroll;
  flex: 0.6;
}

.jchallenge-hint {
  background-color: rgb(55, 160, 73);
  margin: 1vh;
  padding: 1vh;
  border-radius: 5px;
}

.jtable-header > ul {
  display: inline-block;
  display: flex;
}

.jtable-header > ul > li {
  text-decoration: none;
  list-style: none;
  flex: 1;
}

.jsolve-entry {
  background-color: #454545;
  border-radius: 0px;
  display: flex;
  margin-bottom: 3px;
}

.jsolve-entry a {
  text-decoration: none;
  color: white;
}

.jsolve-entry > p {
  flex:1;
  margin: 1vh;
}

.juser-stats {
  box-shadow: 1px 1px 15px #cecece;
  padding:3vh;
  border-radius: 15px;
  margin:4vh;
  margin-left:0;
  color: #333333;
}

.juser-stats > ul > li {
  list-style: none;
  border: 1px solid black;
  padding: 2vh;
  margin: 1vh;
  margin-left: 0;
  border-radius:15px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}

.juser-stats > ul > li > span {

}

.jchallenge-tag {
  background-color: rgb(55, 160, 73);
  padding:0.265em;
  border-radius: 10px;
  font-size: 15px;
}

.jchallenge-button {
  border-radius: 15px;
  border:none;
  background-color: #424242;
  color: white;
  transition: background-color 0.5s;
}

.jchallenge-button:hover {
  background-color: #1f1f1f;
  transition: background-color 0.5s;
}

.jchallenge-solved {
  background-color: #018a01 !important;
}

.jchallenge-solved:hover {
  background-color: #004400 !important;
}

/*
  input:not([type]),
  input[type=text]:not(.browser-default),
  input[type=password]:not(.browser-default),
  input[type=email]:not(.browser-default),
  input[type=url]:not(.browser-default),
  input[type=time]:not(.browser-default),
  input[type=date]:not(.browser-default),
  input[type=datetime]:not(.browser-default),
  input[type=datetime-local]:not(.browser-default),
  input[type=tel]:not(.browser-default),
  input[type=number]:not(.browser-default),
  input[type=search]:not(.browser-default),
  textarea.materialize-textarea {
    background-color:transparent;
    border:none;
    border-bottom:1px solid #9e9e9e;
    border-radius:0;
    outline:none;
    height:3rem;
    width:100%;
    font-size:16px;
    margin:0 0 8px 0;
    padding:0;
    -webkit-box-shadow:none;
    box-shadow:none;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
    -webkit-transition:border .3s, -webkit-box-shadow .3s;
    transition:border .3s, -webkit-box-shadow .3s;
    transition:box-shadow .3s, border .3s;
    transition:box-shadow .3s, border .3s, -webkit-box-shadow .3s
  }
  input:not([type]):disabled,
  input:not([type])[readonly="readonly"],
  input[type=text]:not(.browser-default):disabled,
  input[type=text]:not(.browser-default)[readonly="readonly"],
  input[type=password]:not(.browser-default):disabled,
  input[type=password]:not(.browser-default)[readonly="readonly"],
  input[type=email]:not(.browser-default):disabled,
  input[type=email]:not(.browser-default)[readonly="readonly"],
  input[type=url]:not(.browser-default):disabled,
  input[type=url]:not(.browser-default)[readonly="readonly"],
  input[type=time]:not(.browser-default):disabled,
  input[type=time]:not(.browser-default)[readonly="readonly"],
  input[type=date]:not(.browser-default):disabled,
  input[type=date]:not(.browser-default)[readonly="readonly"],
  input[type=datetime]:not(.browser-default):disabled,
  input[type=datetime]:not(.browser-default)[readonly="readonly"],
  input[type=datetime-local]:not(.browser-default):disabled,
  input[type=datetime-local]:not(.browser-default)[readonly="readonly"],
  input[type=tel]:not(.browser-default):disabled,
  input[type=tel]:not(.browser-default)[readonly="readonly"],
  input[type=number]:not(.browser-default):disabled,
  input[type=number]:not(.browser-default)[readonly="readonly"],
  input[type=search]:not(.browser-default):disabled,
  input[type=search]:not(.browser-default)[readonly="readonly"],
  textarea.materialize-textarea:disabled,
  textarea.materialize-textarea[readonly="readonly"] {
    color:rgba(0,0,0,0.42);
    border-bottom:1px dotted rgba(0,0,0,0.42)
  }
  input:not([type]):disabled+label,
  input:not([type])[readonly="readonly"]+label,
  input[type=text]:not(.browser-default):disabled+label,
  input[type=text]:not(.browser-default)[readonly="readonly"]+label,
  input[type=password]:not(.browser-default):disabled+label,
  input[type=password]:not(.browser-default)[readonly="readonly"]+label,
  input[type=email]:not(.browser-default):disabled+label,
  input[type=email]:not(.browser-default)[readonly="readonly"]+label,
  input[type=url]:not(.browser-default):disabled+label,
  input[type=url]:not(.browser-default)[readonly="readonly"]+label,
  input[type=time]:not(.browser-default):disabled+label,
  input[type=time]:not(.browser-default)[readonly="readonly"]+label,
  input[type=date]:not(.browser-default):disabled+label,
  input[type=date]:not(.browser-default)[readonly="readonly"]+label,
  input[type=datetime]:not(.browser-default):disabled+label,
  input[type=datetime]:not(.browser-default)[readonly="readonly"]+label,
  input[type=datetime-local]:not(.browser-default):disabled+label,
  input[type=datetime-local]:not(.browser-default)[readonly="readonly"]+label,
  input[type=tel]:not(.browser-default):disabled+label,
  input[type=tel]:not(.browser-default)[readonly="readonly"]+label,
  input[type=number]:not(.browser-default):disabled+label,
  input[type=number]:not(.browser-default)[readonly="readonly"]+label,
  input[type=search]:not(.browser-default):disabled+label,
  input[type=search]:not(.browser-default)[readonly="readonly"]+label,
  textarea.materialize-textarea:disabled+label,
  textarea.materialize-textarea[readonly="readonly"]+label {
    color:rgba(0,0,0,0.42)
  }
  input:not([type]):focus:not([readonly]),
  input[type=text]:not(.browser-default):focus:not([readonly]),
  input[type=password]:not(.browser-default):focus:not([readonly]),
  input[type=email]:not(.browser-default):focus:not([readonly]),
  input[type=url]:not(.browser-default):focus:not([readonly]),
  input[type=time]:not(.browser-default):focus:not([readonly]),
  input[type=date]:not(.browser-default):focus:not([readonly]),
  input[type=datetime]:not(.browser-default):focus:not([readonly]),
  input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
  input[type=tel]:not(.browser-default):focus:not([readonly]),
  input[type=number]:not(.browser-default):focus:not([readonly]),
  input[type=search]:not(.browser-default):focus:not([readonly]),
  textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom:1px solid #26a69a;
    -webkit-box-shadow:0 1px 0 0 #26a69a;
    box-shadow:0 1px 0 0 #26a69a
  }
  input:not([type]):focus:not([readonly])+label,
  input[type=text]:not(.browser-default):focus:not([readonly])+label,
  input[type=password]:not(.browser-default):focus:not([readonly])+label,
  input[type=email]:not(.browser-default):focus:not([readonly])+label,
  input[type=url]:not(.browser-default):focus:not([readonly])+label,
  input[type=time]:not(.browser-default):focus:not([readonly])+label,
  input[type=date]:not(.browser-default):focus:not([readonly])+label,
  input[type=datetime]:not(.browser-default):focus:not([readonly])+label,
  input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label,
  input[type=tel]:not(.browser-default):focus:not([readonly])+label,
  input[type=number]:not(.browser-default):focus:not([readonly])+label,
  input[type=search]:not(.browser-default):focus:not([readonly])+label,
  textarea.materialize-textarea:focus:not([readonly])+label {
    color:#26a69a
  }
  input:not([type]):focus.valid ~ label,
  input[type=text]:not(.browser-default):focus.valid ~ label,
  input[type=password]:not(.browser-default):focus.valid ~ label,
  input[type=email]:not(.browser-default):focus.valid ~ label,
  input[type=url]:not(.browser-default):focus.valid ~ label,
  input[type=time]:not(.browser-default):focus.valid ~ label,
  input[type=date]:not(.browser-default):focus.valid ~ label,
  input[type=datetime]:not(.browser-default):focus.valid ~ label,
  input[type=datetime-local]:not(.browser-default):focus.valid ~ label,
  input[type=tel]:not(.browser-default):focus.valid ~ label,
  input[type=number]:not(.browser-default):focus.valid ~ label,
  input[type=search]:not(.browser-default):focus.valid ~ label,
  textarea.materialize-textarea:focus.valid ~ label {
    color:#4CAF50
  }
  input:not([type]):focus.invalid ~ label,
  input[type=text]:not(.browser-default):focus.invalid ~ label,
  input[type=password]:not(.browser-default):focus.invalid ~ label,
  input[type=email]:not(.browser-default):focus.invalid ~ label,
  input[type=url]:not(.browser-default):focus.invalid ~ label,
  input[type=time]:not(.browser-default):focus.invalid ~ label,
  input[type=date]:not(.browser-default):focus.invalid ~ label,
  input[type=datetime]:not(.browser-default):focus.invalid ~ label,
  input[type=datetime-local]:not(.browser-default):focus.invalid ~ label,
  input[type=tel]:not(.browser-default):focus.invalid ~ label,
  input[type=number]:not(.browser-default):focus.invalid ~ label,
  input[type=search]:not(.browser-default):focus.invalid ~ label,
  textarea.materialize-textarea:focus.invalid ~ label {
    color:#F44336
  }
  input:not([type]).validate+label,
  input[type=text]:not(.browser-default).validate+label,
  input[type=password]:not(.browser-default).validate+label,
  input[type=email]:not(.browser-default).validate+label,
  input[type=url]:not(.browser-default).validate+label,
  input[type=time]:not(.browser-default).validate+label,
  input[type=date]:not(.browser-default).validate+label,
  input[type=datetime]:not(.browser-default).validate+label,
  input[type=datetime-local]:not(.browser-default).validate+label,
  input[type=tel]:not(.browser-default).validate+label,
  input[type=number]:not(.browser-default).validate+label,
  input[type=search]:not(.browser-default).validate+label,
  textarea.materialize-textarea.validate+label {
    width:100%
  }
  input.valid:not([type]),
  input.valid:not([type]):focus,
  input[type=text].valid:not(.browser-default),
  input[type=text].valid:not(.browser-default):focus,
  input[type=password].valid:not(.browser-default),
  input[type=password].valid:not(.browser-default):focus,
  input[type=email].valid:not(.browser-default),
  input[type=email].valid:not(.browser-default):focus,
  input[type=url].valid:not(.browser-default),
  input[type=url].valid:not(.browser-default):focus,
  input[type=time].valid:not(.browser-default),
  input[type=time].valid:not(.browser-default):focus,
  input[type=date].valid:not(.browser-default),
  input[type=date].valid:not(.browser-default):focus,
  input[type=datetime].valid:not(.browser-default),
  input[type=datetime].valid:not(.browser-default):focus,
  input[type=datetime-local].valid:not(.browser-default),
  input[type=datetime-local].valid:not(.browser-default):focus,
  input[type=tel].valid:not(.browser-default),
  input[type=tel].valid:not(.browser-default):focus,
  input[type=number].valid:not(.browser-default),
  input[type=number].valid:not(.browser-default):focus,
  input[type=search].valid:not(.browser-default),
  input[type=search].valid:not(.browser-default):focus,
  textarea.materialize-textarea.valid,
  textarea.materialize-textarea.valid:focus,
  .select-wrapper.valid>input.select-dropdown {
    border-bottom:1px solid #4CAF50;
    -webkit-box-shadow:0 1px 0 0 #4CAF50;
    box-shadow:0 1px 0 0 #4CAF50
  }
  input.invalid:not([type]),
  input.invalid:not([type]):focus,
  input[type=text].invalid:not(.browser-default),
  input[type=text].invalid:not(.browser-default):focus,
  input[type=password].invalid:not(.browser-default),
  input[type=password].invalid:not(.browser-default):focus,
  input[type=email].invalid:not(.browser-default),
  input[type=email].invalid:not(.browser-default):focus,
  input[type=url].invalid:not(.browser-default),
  input[type=url].invalid:not(.browser-default):focus,
  input[type=time].invalid:not(.browser-default),
  input[type=time].invalid:not(.browser-default):focus,
  input[type=date].invalid:not(.browser-default),
  input[type=date].invalid:not(.browser-default):focus,
  input[type=datetime].invalid:not(.browser-default),
  input[type=datetime].invalid:not(.browser-default):focus,
  input[type=datetime-local].invalid:not(.browser-default),
  input[type=datetime-local].invalid:not(.browser-default):focus,
  input[type=tel].invalid:not(.browser-default),
  input[type=tel].invalid:not(.browser-default):focus,
  input[type=number].invalid:not(.browser-default),
  input[type=number].invalid:not(.browser-default):focus,
  input[type=search].invalid:not(.browser-default),
  input[type=search].invalid:not(.browser-default):focus,
  textarea.materialize-textarea.invalid,
  textarea.materialize-textarea.invalid:focus,
  .select-wrapper.invalid>input.select-dropdown,
  .select-wrapper.invalid>input.select-dropdown:focus {
    border-bottom:1px solid #F44336;
    -webkit-box-shadow:0 1px 0 0 #F44336;
    box-shadow:0 1px 0 0 #F44336
  }
  input:not([type]).valid ~ .helper-text[data-success],
  input:not([type]):focus.valid ~ .helper-text[data-success],
  input:not([type]).invalid ~ .helper-text[data-error],
  input:not([type]):focus.invalid ~ .helper-text[data-error],
  input[type=text]:not(.browser-default).valid ~ .helper-text[data-success],
  input[type=text]:not(.browser-default):focus.valid ~ .helper-text[data-success],
  input[type=text]:not(.browser-default).invalid ~ .helper-text[data-error],
  input[type=text]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
  input[type=password]:not(.browser-default).valid ~ .helper-text[data-success],
  input[type=password]:not(.browser-default):focus.valid ~ .helper-text[data-success],
  input[type=password]:not(.browser-default).invalid ~ .helper-text[data-error],
  input[type=password]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
  input[type=email]:not(.browser-default).valid ~ .helper-text[data-success],
  input[type=email]:not(.browser-default):focus.valid ~ .helper-text[data-success],
  input[type=email]:not(.browser-default).invalid ~ .helper-text[data-error],
  input[type=email]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
  input[type=url]:not(.browser-default).valid ~ .helper-text[data-success],
  input[type=url]:not(.browser-default):focus.valid ~ .helper-text[data-success],
  input[type=url]:not(.browser-default).invalid ~ .helper-text[data-error],
  input[type=url]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
  input[type=time]:not(.browser-default).valid ~ .helper-text[data-success],
  input[type=time]:not(.browser-default):focus.valid ~ .helper-text[data-success],
  input[type=time]:not(.browser-default).invalid ~ .helper-text[data-error],
  input[type=time]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
  input[type=date]:not(.browser-default).valid ~ .helper-text[data-success],
  input[type=date]:not(.browser-default):focus.valid ~ .helper-text[data-success],
  input[type=date]:not(.browser-default).invalid ~ .helper-text[data-error],
  input[type=date]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
  input[type=datetime]:not(.browser-default).valid ~ .helper-text[data-success],
  input[type=datetime]:not(.browser-default):focus.valid ~ .helper-text[data-success],
  input[type=datetime]:not(.browser-default).invalid ~ .helper-text[data-error],
  input[type=datetime]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
  input[type=datetime-local]:not(.browser-default).valid ~ .helper-text[data-success],
  input[type=datetime-local]:not(.browser-default):focus.valid ~ .helper-text[data-success],
  input[type=datetime-local]:not(.browser-default).invalid ~ .helper-text[data-error],
  input[type=datetime-local]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
  input[type=tel]:not(.browser-default).valid ~ .helper-text[data-success],
  input[type=tel]:not(.browser-default):focus.valid ~ .helper-text[data-success],
  input[type=tel]:not(.browser-default).invalid ~ .helper-text[data-error],
  input[type=tel]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
  input[type=number]:not(.browser-default).valid ~ .helper-text[data-success],
  input[type=number]:not(.browser-default):focus.valid ~ .helper-text[data-success],
  input[type=number]:not(.browser-default).invalid ~ .helper-text[data-error],
  input[type=number]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
  input[type=search]:not(.browser-default).valid ~ .helper-text[data-success],
  input[type=search]:not(.browser-default):focus.valid ~ .helper-text[data-success],
  input[type=search]:not(.browser-default).invalid ~ .helper-text[data-error],
  input[type=search]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
  textarea.materialize-textarea.valid ~ .helper-text[data-success],
  textarea.materialize-textarea:focus.valid ~ .helper-text[data-success],
  textarea.materialize-textarea.invalid ~ .helper-text[data-error],
  textarea.materialize-textarea:focus.invalid ~ .helper-text[data-error],
  .select-wrapper.valid .helper-text[data-success],
  .select-wrapper.invalid ~ .helper-text[data-error] {
    color:transparent;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    pointer-events:none
  }
  input:not([type]).valid ~ .helper-text:after,
  input:not([type]):focus.valid ~ .helper-text:after,
  input[type=text]:not(.browser-default).valid ~ .helper-text:after,
  input[type=text]:not(.browser-default):focus.valid ~ .helper-text:after,
  input[type=password]:not(.browser-default).valid ~ .helper-text:after,
  input[type=password]:not(.browser-default):focus.valid ~ .helper-text:after,
  input[type=email]:not(.browser-default).valid ~ .helper-text:after,
  input[type=email]:not(.browser-default):focus.valid ~ .helper-text:after,
  input[type=url]:not(.browser-default).valid ~ .helper-text:after,
  input[type=url]:not(.browser-default):focus.valid ~ .helper-text:after,
  input[type=time]:not(.browser-default).valid ~ .helper-text:after,
  input[type=time]:not(.browser-default):focus.valid ~ .helper-text:after,
  input[type=date]:not(.browser-default).valid ~ .helper-text:after,
  input[type=date]:not(.browser-default):focus.valid ~ .helper-text:after,
  input[type=datetime]:not(.browser-default).valid ~ .helper-text:after,
  input[type=datetime]:not(.browser-default):focus.valid ~ .helper-text:after,
  input[type=datetime-local]:not(.browser-default).valid ~ .helper-text:after,
  input[type=datetime-local]:not(.browser-default):focus.valid ~ .helper-text:after,
  input[type=tel]:not(.browser-default).valid ~ .helper-text:after,
  input[type=tel]:not(.browser-default):focus.valid ~ .helper-text:after,
  input[type=number]:not(.browser-default).valid ~ .helper-text:after,
  input[type=number]:not(.browser-default):focus.valid ~ .helper-text:after,
  input[type=search]:not(.browser-default).valid ~ .helper-text:after,
  input[type=search]:not(.browser-default):focus.valid ~ .helper-text:after,
  textarea.materialize-textarea.valid ~ .helper-text:after,
  textarea.materialize-textarea:focus.valid ~ .helper-text:after,
  .select-wrapper.valid ~ .helper-text:after {
    content:attr(data-success);
    color:#4CAF50
  }
  input:not([type]).invalid ~ .helper-text:after,
  input:not([type]):focus.invalid ~ .helper-text:after,
  input[type=text]:not(.browser-default).invalid ~ .helper-text:after,
  input[type=text]:not(.browser-default):focus.invalid ~ .helper-text:after,
  input[type=password]:not(.browser-default).invalid ~ .helper-text:after,
  input[type=password]:not(.browser-default):focus.invalid ~ .helper-text:after,
  input[type=email]:not(.browser-default).invalid ~ .helper-text:after,
  input[type=email]:not(.browser-default):focus.invalid ~ .helper-text:after,
  input[type=url]:not(.browser-default).invalid ~ .helper-text:after,
  input[type=url]:not(.browser-default):focus.invalid ~ .helper-text:after,
  input[type=time]:not(.browser-default).invalid ~ .helper-text:after,
  input[type=time]:not(.browser-default):focus.invalid ~ .helper-text:after,
  input[type=date]:not(.browser-default).invalid ~ .helper-text:after,
  input[type=date]:not(.browser-default):focus.invalid ~ .helper-text:after,
  input[type=datetime]:not(.browser-default).invalid ~ .helper-text:after,
  input[type=datetime]:not(.browser-default):focus.invalid ~ .helper-text:after,
  input[type=datetime-local]:not(.browser-default).invalid ~ .helper-text:after,
  input[type=datetime-local]:not(.browser-default):focus.invalid ~ .helper-text:after,
  input[type=tel]:not(.browser-default).invalid ~ .helper-text:after,
  input[type=tel]:not(.browser-default):focus.invalid ~ .helper-text:after,
  input[type=number]:not(.browser-default).invalid ~ .helper-text:after,
  input[type=number]:not(.browser-default):focus.invalid ~ .helper-text:after,
  input[type=search]:not(.browser-default).invalid ~ .helper-text:after,
  input[type=search]:not(.browser-default):focus.invalid ~ .helper-text:after,
  textarea.materialize-textarea.invalid ~ .helper-text:after,
  textarea.materialize-textarea:focus.invalid ~ .helper-text:after,
  .select-wrapper.invalid ~ .helper-text:after {
    content:attr(data-error);
    color:#F44336
  }
  input:not([type])+label:after,
  input[type=text]:not(.browser-default)+label:after,
  input[type=password]:not(.browser-default)+label:after,
  input[type=email]:not(.browser-default)+label:after,
  input[type=url]:not(.browser-default)+label:after,
  input[type=time]:not(.browser-default)+label:after,
  input[type=date]:not(.browser-default)+label:after,
  input[type=datetime]:not(.browser-default)+label:after,
  input[type=datetime-local]:not(.browser-default)+label:after,
  input[type=tel]:not(.browser-default)+label:after,
  input[type=number]:not(.browser-default)+label:after,
  input[type=search]:not(.browser-default)+label:after,
  textarea.materialize-textarea+label:after,
  .select-wrapper+label:after {
    display:block;
    content:"";
    position:absolute;
    top:100%;
    left:0;
    opacity:0;
    -webkit-transition:.2s opacity ease-out, .2s color ease-out;
    transition:.2s opacity ease-out, .2s color ease-out
  }
  .input-field {
    position:relative;
    margin-top:1rem;
    margin-bottom:1rem
  }
  .input-field.inline {
    display:inline-block;
    vertical-align:middle;
    margin-left:5px
  }
  .input-field.inline input,
  .input-field.inline .select-dropdown {
    margin-bottom:1rem
  }
  .input-field.col label {
    left:.75rem
  }
  .input-field.col .prefix ~ label,
  .input-field.col .prefix ~ .validate ~ label {
    width:calc(100% - 3rem - 1.5rem)
  }
  .input-field>label {
    color:#9e9e9e;
    position:absolute;
    top:0;
    left:0;
    font-size:1rem;
    cursor:text;
    -webkit-transition:color .2s ease-out, -webkit-transform .2s ease-out;
    transition:color .2s ease-out, -webkit-transform .2s ease-out;
    transition:transform .2s ease-out, color .2s ease-out;
    transition:transform .2s ease-out, color .2s ease-out, -webkit-transform .2s ease-out;
    -webkit-transform-origin:0% 100%;
    transform-origin:0% 100%;
    text-align:initial;
    -webkit-transform:translateY(12px);
    transform:translateY(12px)
  }
  .input-field>label:not(.label-icon).active {
    -webkit-transform:translateY(-14px) scale(0.8);
    transform:translateY(-14px) scale(0.8);
    -webkit-transform-origin:0 0;
    transform-origin:0 0
  }
  .input-field>input[type]:-webkit-autofill:not(.browser-default):not([type="search"])+label,
  .input-field>input[type=date]:not(.browser-default)+label,
  .input-field>input[type=time]:not(.browser-default)+label {
    -webkit-transform:translateY(-14px) scale(0.8);
    transform:translateY(-14px) scale(0.8);
    -webkit-transform-origin:0 0;
    transform-origin:0 0
  }
  .input-field .helper-text {
    position:relative;
    min-height:18px;
    display:block;
    font-size:12px;
    color:rgba(0,0,0,0.54)
  }
  .input-field .helper-text::after {
    opacity:1;
    position:absolute;
    top:0;
    left:0
  }
  .input-field .prefix {
    position:absolute;
    width:3rem;
    font-size:2rem;
    -webkit-transition:color .2s;
    transition:color .2s;
    top:.5rem
  }
  .input-field .prefix.active {
    color:#26a69a
  }
  .input-field .prefix ~ input,
  .input-field .prefix ~ textarea,
  .input-field .prefix ~ label,
  .input-field .prefix ~ .validate ~ label,
  .input-field .prefix ~ .helper-text,
  .input-field .prefix ~ .autocomplete-content {
    margin-left:3rem;
    width:92%;
    width:calc(100% - 3rem)
  }
  .input-field .prefix ~ label {
    margin-left:3rem
  }
  @media only screen and (max-width: 992px) {
    .input-field .prefix ~ input {
      width:86%;
      width:calc(100% - 3rem)
    }
  }
  @media only screen and (max-width: 600px) {
    .input-field .prefix ~ input {
      width:80%;
      width:calc(100% - 3rem)
    }
  }
  .input-field input[type=search] {
    display:block;
    line-height:inherit;
    -webkit-transition:.3s background-color;
    transition:.3s background-color
  }
  .nav-wrapper .input-field input[type=search] {
    height:inherit;
    padding-left:4rem;
    width:calc(100% - 4rem);
    border:0;
    -webkit-box-shadow:none;
    box-shadow:none
  }
  .input-field input[type=search]:focus:not(.browser-default) {
    background-color:#fff;
    border:0;
    -webkit-box-shadow:none;
    box-shadow:none;
    color:#444
  }
  .input-field input[type=search]:focus:not(.browser-default)+label i,
  .input-field input[type=search]:focus:not(.browser-default) ~ .mdi-navigation-close,
  .input-field input[type=search]:focus:not(.browser-default) ~ .material-icons {
    color:#444
  }
  .input-field input[type=search]+.label-icon {
    -webkit-transform:none;
    transform:none;
    left:1rem
  }
  .input-field input[type=search] ~ .mdi-navigation-close,
  .input-field input[type=search] ~ .material-icons {
    position:absolute;
    top:0;
    right:1rem;
    color:transparent;
    cursor:pointer;
    font-size:2rem;
    -webkit-transition:.3s color;
    transition:.3s color
  }
*/