* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.modal-wrap {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 310;
}
.modal-mask {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.8);
}
.modal-button-close {
  position: absolute;
  right: 32px;
  top: 32px;
}
.modal-button-close a {
  position: relative;
  display: block;
  background: red;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.modal-button-close a::before, .modal-button-close a::after {
  content: "";
  position: absolute;
  display: block;
  width: 2px;
  height: 20px;
  background: #fff;
  top: 7px;
  left: calc(50% - 2px);
}
.modal-button-close a::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.modal-button-close a::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.modal-button-close a:hover {
  -webkit-filter: brightness(0.9);
          filter: brightness(0.9);
}
@media screen and (max-width: 480px) {
  .modal-button-close {
    right: 24px;
    top: 24px;
  }
}

.security {
  color: #fff;
}
.security-group {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.security-page {
  position: absolute;
  width: 90%;
  max-width: 540px;
  padding: 32px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: #26262e;
  border-radius: 12px;
  border: 1px solid #dfad0f;
}
@media screen and (max-width: 768px){
  .security-page{
    max-width:none;
  }
}
@media screen and (max-width: 480px) {
  .security-page {
    padding: 24px;
  }
}
.security-header h4 {
  font-size: 24px;
  width: calc(100% - 40px);
  margin: 0 0 2rem 0;
  padding: 0;
  color: #f3d146;
}
.security-body {
  position: relative;
  max-height: 72vh;
}
.security-tabs {
  border-bottom: 1px solid #f3d146;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.security-tabs .tab {
  cursor: pointer;
  padding: 10px;
  width: 50%;
  text-align: center;
  color: #fff;
  border-radius: 8px 8px 0px 0px;
  font-size: large;
}
@media screen and (max-width: 480px) {
  .security-tabs .tab {
    padding: 4px;
    line-height: 1.33;
    padding: 14px;
  }
}
.security-panels {
  padding: 32px 20px 0;
  font-size: 16px;
}
.security-panels .panel {
  display: none;
  -webkit-animation: fadein 0.8s;
          animation: fadein 0.8s;
}
@media screen and (max-width: 480px) {
  .security-panels {
    padding: 32px 0;
  }
}
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.security-tab-radio {
  display: none;
}
.security #tabUsername:checked ~ .security-panels #tabUsername-panel,
.security #tabPassword:checked ~ .security-panels #tabPassword-panel {
  display: block;
}
.security #tabUsername:checked ~ .security-tabs #tabUsername-tab,
.security #tabPassword:checked ~ .security-tabs #tabPassword-tab {
  background: #f3d146;
  color: #000;
  font-weight: bold;
  font-size: large;
}
.security-way, .security-reset {
  position: relative;
  width: 100%;
}
.security-way li, .security-reset li {
  position: relative;
  padding-left: 32px;
}
.security-way li:not(:last-child), .security-reset li:not(:last-child) {
  margin-bottom: 32px;
}
.security-way span, .security-reset span {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.security-reset li {
  padding-left: 0;
  padding-right: 36px;
}
.security-reset li .eye {
  position: absolute;
  right: 0;
  top: 45px;
  width: 24px;
  height: 24px;
  background: url('data:image/svg+xml,<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h68v68H0z"/></defs><g transform="translate(6 6)" fill="none" fill-rule="evenodd"><mask id="b" fill="%23fff"><use xlink:href="%23a"/></mask><g mask="url(%23b)" fill="%23FFFFFF"><path d="M48.999 18.24c6.617 3.052 12.572 8.136 17.492 14.72.679.911.679 2.182 0 3.093C58.181 47.16 46.92 54 34.5 54c-5.675 0-11.11-1.428-16.13-4.041l6.004-6.22c2.686 2.98 6.65 4.77 11.017 4.493 6.794-.442 12.312-5.996 12.751-12.835A13.783 13.783 0 0043.39 24.05zM34.5 15c3.6 0 7.103.575 10.465 1.662l-5.033 5.21a13.593 13.593 0 00-6.323-1.104c-6.808.429-12.326 5.983-12.751 12.835-.15 2.412.316 4.7 1.255 6.72l-7.29 7.55c-4.561-3.003-8.715-7.016-12.314-11.834a2.603 2.603 0 010-3.092C10.819 21.84 22.08 15 34.5 15zm7.353 19.968c-.24 3.708-3.218 6.692-6.874 6.92a7.336 7.336 0 01-6.191-2.717l10.2-10.563a7.386 7.386 0 012.865 6.36zm-6.963-7.875l-7.724 7.998a7.573 7.573 0 01-.006-1.073c.226-3.694 3.205-6.678 6.875-6.92.288-.017.574-.019.855-.005z" fill-rule="nonzero"/><path d="M57.485 8.872l2.877 2.78-45.847 47.476-2.877-2.78z"/></g></g></svg>') no-repeat;
  background-position: 50%;
  background-size: contain;
  cursor: pointer;
}
@media screen and (max-width:768px) {
  .security-reset li .eye{
    top:26px;
  }
}
.security-reset li .eye.is--see {
  width: 24px;
  height: 24px;
  background: url('data:image/svg+xml,<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h68v68H0z"/></defs><g transform="translate(6 6)" fill="none" fill-rule="evenodd"><mask id="b" fill="%23fff"><use xlink:href="%23a"/></mask><g mask="url(%23b)" fill="%23FFFFFF" fill-rule="nonzero"><path d="M34.5 15c-12.419 0-23.681 6.84-31.991 17.947a2.603 2.603 0 000 3.092C10.819 47.161 22.08 54 34.5 54s23.681-6.84 31.991-17.947a2.603 2.603 0 000-3.092C58.181 21.839 46.92 15 34.5 15zm.89 33.232c-8.243.522-15.05-6.317-14.532-14.629.425-6.852 5.943-12.406 12.751-12.835 8.244-.522 15.052 6.317 14.533 14.629-.439 6.839-5.957 12.393-12.751 12.835zm-.411-6.344c-4.441.28-8.111-3.4-7.819-7.87.226-3.694 3.205-6.678 6.875-6.92 4.44-.28 8.11 3.4 7.818 7.87-.24 3.708-3.218 6.692-6.874 6.92z"/></g></g></svg>') no-repeat;
  background-position: 50%;
  background-size: contain;
}
.security-rule {
  padding: 20px 20px 0;
  font-size: 14px;
}
.security-rule p {
  margin: 0 0 4px 0;
  font-weight: bold;
}
.security-rule ul {
  margin: 0;
  padding: 0;
}
.security-rule ul li {
  position: relative;
  padding-left: 20px;
  padding: 4px 0;
}
.security-rule ul li .rule-check {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #999;
  margin-right: 8px;
  margin-top: -2px;
}
.security-rule ul li .rule-check::before, .security-rule ul li .rule-check::after {
  content: "";
  position: absolute;
  display: block;
  width: 1px;
  height: 8px;
  background: #fff;
  top: 4px;
  left: 8px;
}
.security-rule ul li .rule-check::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.security-rule ul li .rule-check::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.security-rule ul li .rule-check.is--checked {
  background-color: #42a22c;
}
.security-rule ul li .rule-check.is--checked::before {
  top: 5px;
  left: 9px;
}
.security-rule ul li .rule-check.is--checked::after {
  height: 5px;
  left: 4px;
  top: 7px;
}
.security-otp {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.security-otp-button {
  width: 120px;
  height: 32px;
  margin-left: 12px;
  border-radius: 2px;
  border: 0;
  background-color: transparent;
  color: #f3d146;
  border: 2px solid #f3d146;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.security-otp-button:hover {
  background-color: #f3d146;
  color: #000;
  font-weight: bold;
}
.security-list {
  font-size:16px;
  width: 200px;
  position: relative;
  margin: 20px auto;
}
.security-list li {
  margin: 8px 0;
}
.security-list li span:first-child {
  margin-right: 4px;
}
.security-list li a {
  color: #f3d146;
}
.security-label {
  position: absolute;
  left: 0;
  top: 2px;
  width: 100%;
  cursor: pointer;
}
.security-label::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid #fff;
  border-radius: 50%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.security-radio {
  display: none;
}
.security-radio:checked + label::before {
  background-color: #f3d146;
  border: 1px solid #f3d146;
}
.security-radio:checked + label + span {
  color: #f3d146;
}
.security-input {
  display: block;
  width: 100%;
  margin: 8px 0;
  background-color: #e8f0fe;
  height: 32px;
  outline: none;
  border: 1px solid #fcdc00;
  padding:4px 8px
}
@media screen and (max-width:768px) {
  .security-input{
    font-size: 0.75rem;
    padding:2.4vw 3vw;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }
}
.security-input:focus {
  border: 2px solid #fcdc00;
}
.security-button {
  border: 0;
  position: relative;
  min-width: 200px;
  height: 40px;
  margin: 40px auto 0;
  border-radius: 20px;
  display: block;
  padding: 8px;
  background: #f3d146;
  background-image: url(../images/login/login_btn-bg.jpg);
  font-weight: bold;
  font-size: 18px;
  cursor: pointer;
  -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.3), inset 0 0 5px rgba(255, 255, 255, 0.3);
          box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.3), inset 0 0 5px rgba(255, 255, 255, 0.3);
}/*# sourceMappingURL=security.css.map */