.SignIn_MainWrapper,
.SignUp_MainWrapper {
  min-height: 640px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  padding: 50px 30px 50px 160px;
  background: var(--light-warm-blue);
}

.SignUp_MainWrapper  {
  min-height: 1000px;
}

.SignIn_MainWrapper .row ,
.SignUp_MainWrapper .row {
  margin-left: 0px;
  margin-right: 0px;
  width: 100%;
}

.SignIn_MainWrapper .signin-title,
.SignUp_MainWrapper .signin-title {
  font-size: 42px;
  font-weight: bold;
  color: var(--ocean-blue);
}

.SignIn_MainWrapper .signin-content,
.SignUp_MainWrapper .signin-content {
  font-size: 24px;
  color: var(--ocean-blue);
}

.SignIn_MainWrapper .signin-content + a,
.SignUp_MainWrapper .signin-content + a {
  padding: 0px 15px;
  font-size: 24px;
  vertical-align: baseline;
}

.SignIn_MainWrapper .signin-copyright,
.SignUp_MainWrapper .signin-copyright {
  font-size: 16px;
  color: var(--ocean-blue);
}

/*OVERWRITE AUTH STYLES*/
div[id$="_Login_UP"] > .dnnLogin {
  min-height: 640px;
  display: flex;
  justify-content: left;
  align-items: center;
}

div[id$="_Login_UP"] .dnnFormItem {
  text-align: left;
  padding: 0 30px 0;
  margin-bottom: 10px;
}

div[id$="_Login_UP"] .dnnLabel {
  width: 100%;
  text-align: left;
  margin: 0px;  
  color: var(--ocean-blue);
}

div[id$="_Login_UP"]  .dnnLoginService input[type="text"], 
div[id$="_Login_UP"]  .dnnLoginService input[type="password"] {
  width: 100%;
  min-width: 100%;
  border-radius: 5px;
  border: 1px solid var(--ocean-blue);
  box-shadow: none;
}

div[id$="_Login_UP"] .dnnFormItem > label.dnnFormLabel,
div[id$="_Login_UP"] .dnnFormItem > span.dnnFormLabel {
  display: none;
}

div[id$="_Login_UP"] .mark {
  background-color: transparent;
}

div[id$="_Login_UP"] a[id$="_Login_DNN_cancelLink"],
div[id$="_Login_UP"] li[id$="_Login_DNN_liRegister"] {
  display: none;
}

div[id$="_Login_UP"] a[id$="_Login_DNN_cmdLogin"] {
  width: 100%;
  background: var(--warm-blue);
  color: var(--white);
  border: 0;
  background-color: var(--warm-blue);
  border-radius: 5px;
  cursor: pointer;
  font-weight: 700;
  padding: 7px 15px;
  font-size: 1.4rem;
  box-sizing: border-box;
  vertical-align: middle;
}

div[id$="_Login_UP"] a[id$="_Login_DNN_cmdLogin"]:hover {
  text-decoration: none;
}

div[id$="_Login_pnlLogin"] .dnnLoginService .dnnFormItem:nth-child(3) .dnnLoginRememberMe .dnnBoxLabel {
  font-weight: 100;
  color: var(--ocean-blue);
}

div[id$="_Login_pnlLogin"] .dnnLoginService .dnnFormItem:nth-child(5) .dnnLoginActions,
div[id$="_Login_pnlLogin"] .dnnLoginService .dnnFormItem:nth-child(5) .dnnLoginActions .dnnActions {
  width: 100%;
}

div[id$="_Login_pnlLogin"] .dnnLoginService .dnnFormItem:nth-child(5) .dnnLoginActions .dnnActions {
  display: flex;
  justify-content: end;
  padding-top: 0px;
}

div[id$="_Login_pnlLogin"] .dnnLoginService .dnnFormItem:nth-child(5) .dnnLoginActions .dnnActions a[id$="_Login_DNN_passwordLink"] {
  display: inline-block;
  text-decoration: underline !important;
  cursor: pointer;
  font-weight: 700;
  padding: 7px 0px;
  font-size: 1.4rem;
  vertical-align: middle;
  color: var(--warm-blue);
  background: transparent;
  border: 0;
  box-shadow: none;
}

div[id$="_Login_UP"] div[id$="_dnnSkinMessage"] {
  background: transparent;
  border: 0;
  color: red;
  position: absolute;
  top: 0px;
  left: 10px;
}

div[id$=_Login_UP_Prog] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
}

div[id$=_Login_UP_Prog] .dnnPanelLoading {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light-warm-blue);
}

div[id$=_Login_UP_Prog] .dnnPanelLoading .loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 5px solid;
  border-color: var(--ocean-blue) var(--ocean-blue) var(--warm-blue);
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

div[id$=_Login_UP_Prog] .dnnPanelLoading .loader::after {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 5px solid;
  border-color: var(--warm-blue) var(--ocean-blue) var(--ocean-blue);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  animation: rotationBack 0.5s linear infinite;
  transform-origin: center center;
}

div[id$="_Login_UP"] .extra-info-content {
  text-align: center;
    color: var(--ocean-blue);
}

div[id$="_Login_UP"] label[id$="Login_DNN_plUsername"]::after,
div[id$="_Login_UP"] label[id$="Login_DNN_plPassword"]::after {
  content: '*';
  color: red;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 
    
@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
/*END*/
/*REGISTRATION*/
div[id$="_Register_UP"] {
  padding: 30px;
}

div[id$="_Register_UP"] div[id$="_Register_userForm"] .dnnFormItem {
  display: flex;
  flex-wrap: wrap;
}

div[id$="_Register_UP"] div[id$="_Register_userForm"] .dnnFormItem .dnnLabel {
  width: 100%;
  text-align: left;
  color: var(--ocean-blue);
}

div[id$="_Register_UP"] div[id$="_Register_userForm"] .dnnFormItem .password-strength-container {
  width: 100%;
}

div[id$="_Register_UP"] div[id$="_Register_userForm"] .dnnFormItem input[type="text"], 
div[id$="_Register_UP"] div[id$="_Register_userForm"] .dnnFormItem input[type="password"], 
div[id$="_Register_UP"] div[id$="_Register_userForm"] .dnnFormItem input[type="email"] {
  width: 100%;
}

div[id$="_Register_UP"] div[id$="_Register_userForm"] .dnnFormItem .dnnLabel a.dnnFormHelp,
div[id$="_Register_UP"] a[id$="_Register_cancelLink"] {
  display: none;
}

div[id$="_Register_UP"] .dnnRegistrationForm > .dnnFormItem .dnnFormMessage  {
  width: 50%;
  background: var(--light-warm-blue);
  border: none;
  border-radius: 10px;
  color: var(--ocean-blue);
}

div[id$="_Register_UP"] ul[id$="_Register_actionsRow"] > li {
  width: 100%;
  max-width: 445px;
}

div[id$="_Register_UP"] ul[id$="_Register_actionsRow"] > li .dnnPrimaryAction {
  width: 100%;
  background: var(--warm-blue);
  color: var(--white);
  border: 0;
  background-color: var(--warm-blue);
  border-radius: 5px;
  cursor: pointer;
  font-weight: 700;
  padding: 7px 15px;
  font-size: 1.4rem;
  box-sizing: border-box;
  vertical-align: middle;
}

div[id$="_Register_UP"] ul[id$="_Register_actionsRow"] > li .dnnPrimaryAction:hover {
  text-decoration: none;
}

div[id$="_Register_UP"] .dnnFormMessage.dnnFormSuccess {
  border-radius: 10px;
  background: var(--light-warm-blue);
  border: none;
}

div[id$="_Register_UP"] .dnnFormMessage.dnnFormSuccess span {
  color: var(--ocean-blue);
}

div[id$="_Register_UP"] a[id$="_Register_closeLink"] {
  font-family: var(--font-regular);
  display: inline-block;
  text-decoration: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 700;
  padding: 7px 15px;
  font-size: 1.4rem;
  box-sizing: border-box;
  vertical-align: middle;
  background-color: var(--warm-blue);
  color: var(--white);
  background: var(--warm-blue);
  border: none;
  box-shadow: none;
  font-weight: 100;
}

div[id$="_Register_UP"] ul[id$="Register_actionsRow"] {
  width: 60%;
}

div[id$="_Register_UP"] .dnnFormItem span.dnnFormMessage.dnnFormError {
  bottom: 73%;
}

div[id$=_Register_UP_Prog] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
}

div[id$=_Register_UP_Prog] .dnnPanelLoading {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light-warm-blue);
}

div[id$=_Register_UP_Prog] .dnnPanelLoading .loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 5px solid;
  border-color: var(--ocean-blue) var(--ocean-blue) var(--warm-blue);
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

div[id$=_Register_UP_Prog] .dnnPanelLoading .loader::after {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 5px solid;
  border-color: var(--warm-blue) var(--ocean-blue) var(--ocean-blue);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  animation: rotationBack 0.5s linear infinite;
  transform-origin: center center;
}
/*END*/

@media (max-width: 1200px) {
  .SignIn_MainWrapper,
  .SignUp_MainWrapper {
    padding: 50px 30px 50px 30px;
  }
}

@media (max-width: 1000px) {
  .SignIn_MainWrapper,
  .SignUp_MainWrapper,
  div[id$="_Login_UP"] > .dnnLogin,
  div[id$="_Register_UP"] > .dnnRegistrationForm {
    min-height: auto;
  }

  div[id$="_Login_UP"] > .dnnLogin {
    justify-content: center;
    padding: 30px;
  }

  .signin-copyright {
    display: none;
  }

  div[id$="_Register_UP"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: hidden;
  }

  div[id$="_Register_UP"] > .dnnRegistrationForm {
    width: min-content;
  }

  div[id$="_Register_UP"] div[id$="_Register_userForm"] .dnnFormItem input[type="text"], 
  div[id$="_Register_UP"] div[id$="_Register_userForm"] .dnnFormItem input[type="password"], 
  div[id$="_Register_UP"] div[id$="_Register_userForm"] .dnnFormItem input[type="email"],
  div[id$="_Register_UP"] div.dnnRegistrationForm .dnnForm,
  div[id$="_Register_UP"] .dnnRegistrationForm > .dnnFormItem .dnnFormMessage,
  div[id$="_Register_UP"] div[id$="_Register_userForm"] .dnnFormItem .password-strength-container,
  div[id$="_Register_UP"] ul[id$="_Register_actionsRow"] > li {
    width: 100%;
    max-width: 100%;
  }

  div[id$="_Login_UP"] div[id$="_dnnSkinMessage"] {
    position: relative;
  }

  div[id$="_Register_UP"] ul[id$="Register_actionsRow"] {
    width: 100%;
  }

  div[id$="_Register_UP"] .dnnFormItem span.dnnFormMessage.dnnFormError {
    width: 200px;
    right: 25%;
  }
}

@media (max-width: 700px){
  div[id$="_Register_UP"] > .dnnRegistrationForm {
    min-width: 400px;
    width: 80%;
  }

  div[id$="_Register_UP"] .dnnFormItem span.dnnFormMessage.dnnFormError {
    right: 20%;
  }
}

@media (max-width: 600px) {
  div[id$="_Login_UP"] .LoginPanel {
    width: 400px;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  div[id$="_Register_UP"] {
    width: auto;
    padding-left: 30px;
    padding-right: 30px;
  }

  div[id$="_Register_UP"] > .dnnRegistrationForm {
    min-width: auto;
    width: min-content;
  }

  div[id$="_Register_UP"] div[id$="_Register_userForm"] .dnnFormItem input[type="text"], 
  div[id$="_Register_UP"] div[id$="_Register_userForm"] .dnnFormItem input[type="password"], 
  div[id$="_Register_UP"] div[id$="_Register_userForm"] .dnnFormItem input[type="email"],
  div[id$="_Register_UP"] div.dnnRegistrationForm .dnnForm,
  div[id$="_Register_UP"] .dnnRegistrationForm > .dnnFormItem .dnnFormMessage,
  div[id$="_Register_UP"] div[id$="_Register_userForm"] .dnnFormItem .password-strength-container,
  div[id$="_Register_UP"] ul[id$="_Register_actionsRow"] > li {
    width: 400px;
    max-width: 400px;
  }

  div[id$="_Register_UP"] .dnnFormItem span.dnnFormMessage.dnnFormError {
    right: 0%;
    width: 150px;
  }
}

@media (max-width: 450px) {
  div[id$="_Login_UP"] .LoginPanel {
    width: 300px;
  } 

  div[id$="_Register_UP"] div[id$="_Register_userForm"] .dnnFormItem input[type="text"], 
  div[id$="_Register_UP"] div[id$="_Register_userForm"] .dnnFormItem input[type="password"], 
  div[id$="_Register_UP"] div[id$="_Register_userForm"] .dnnFormItem input[type="email"],
  div[id$="_Register_UP"] div.dnnRegistrationForm .dnnForm,
  div[id$="_Register_UP"] .dnnRegistrationForm > .dnnFormItem .dnnFormMessage,
  div[id$="_Register_UP"] div[id$="_Register_userForm"] .dnnFormItem .password-strength-container,
  div[id$="_Register_UP"] ul[id$="_Register_actionsRow"] > li {
    width: 300px;
    max-width: 300px;
  }
}