/* add tab */

.login-page .tab {display: none;}
.login-page .tab-content {opacity: 1; height: auto; overflow: visible; visibility: visible;}
.login-page .tab .control {display: flex; gap: 1px;width: 100%;border-bottom: 2px solid var(--color-secondary);margin-bottom: 0;}
.login-page .tab .control li {float: left;width: calc(100% / 2);}
.login-page .tab .control li:nth-child(1) .link {border-top-right-radius: 0;}
.login-page .tab .control li:nth-child(2) .link {border-top-left-radius: 0;}
.login-page .tab .control .link {text-align: left; gap: 7px;padding: 13px; height: auto;border: 1px solid var(--color-border);
  font-size: 14px;padding: 12px 10px; justify-content: start;
  border-radius: 15px 15px 0 0;background-color: var(--color-snow); border-bottom: var(--color-secondary);
}
.login-page .tab .control .link .icon {min-width: 33px;min-height: 33px;display: flex;align-items: center;justify-content: center;color: #fff;
  background-color: var(--color-secondary); border-radius: 50%; font-size: 14px; font-weight: bold; transition: var(--transition); border: 1px solid transparent;
}
.login-page .tab .control .link img.icon {width: 33px;height: 33px;}
.login-page .tab .control .link.active {background-color: var(--color-secondary);color: #fff;border-color: var(--color-secondary);}
.login-page .tab .control .link.active .icon {background-color: #fff;color: var(--color-secondary);border-color: var(--color-light);}

@media (max-width: 767px) {
  .login-page .container {gap: 160px!important;}
  /* .login-page .body.-has-tab .login-card {margin-top: 80px;} */
  /* .login-page .body.-has-tab .login-card {padding: 100px 20px 20px 20px;border-radius: 15px;} */
  .login-page .body.-has-tab .login-card {padding: 30px 20px 20px 20px;border-radius: 0 0 15px 15px;margin-top: 0;}
  .login-page .body.-has-tab .login-card .brand {transform: translateY(-95px);}
  .login-page .body.-has-tab .login-card > .row > div:first-child::before,
  .login-page .body.-has-tab .login-card > .row > div:first-child::after {display: none !important;}

  .login-page .tab {display: block;}
  /* position: absolute; top: 0; left: 0;width: 100%; */
  .login-page .tab-content {padding-bottom: 0 !important; margin-bottom: 0 !important;}
  .login-page .tab-content:not(.active) {opacity: 0; height: 0; overflow: hidden; visibility: hidden;}
}