html,
body {
   margin: 0;
   padding: 0;
   height: 100%;
}

.container-box {
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
   justify-content: center;
   align-items: center;
   background-color: #F0F0F0;
   background-image: url('/Shared/Images/Object/SystemMessages/background.svg');
   background-repeat: no-repeat;
   background-size: 111%;
   background-position: 99% bottom;
   overflow-y: scroll;
}

.message-box {
   display: flex;
   flex-direction: column;
   width: calc(40% - 90px);
   max-width: 700px;
   padding: 40px 45px 40px 45px;
   color: #444;
   background: #fff;
   border-radius: 6px;
}

.message-title {
   display: flex;
   flex-direction: column;
   width: 100%;
   margin-bottom: 20px;
   font-family: 'Lato', sans-serif;
   font-size: 24px;
   line-height: 29px;
   color: #222222;
}

.message-body {
   display: flex;
   flex-direction: column;
   width: 100%;
   font-family: 'Lato', sans-serif;
}

.message-body p {
   font-size: 16px;
   line-height: 24px;
}

.message-body p {
   margin: 10px 0;
}

.message-body p:first-of-type {
   margin-top: 0;
}

.message-body p:last-of-type {
   margin-bottom: 0;
}

a:link, a:visited {
   color: #00abde;
   text-decoration: none;
}

ul {
   margin: 0;
   padding: 0 0 0 20px;
}

li {
   margin: 0 0 10px;
   padding: 0;
}

.message-box .button {
   flex: 1;
   padding: 0;
   font-family: 'Lato', sans-serif;
   font-size: 16px;
   line-height: 36px;
   font-weight: normal;
   color: white;
   text-transform: none;
   background: #00abde;
   border: 2px solid #00abde;
   border-radius: 6px;
   cursor: pointer;
   text-align: center;
   box-sizing: border-box;
}

.message-box .buttonOutlined {
   flex: 1;
   padding: 0;
   font-family: 'Lato', sans-serif;
   font-size: 16px;
   line-height: 36px;
   font-weight: normal;
   color: #00abde;
   background: #fff;
   text-transform: none;
   border: 2px solid #00abde;
   border-radius: 6px;
   cursor: pointer;
   text-align: center;
   box-sizing: border-box;
}

.message-box .button:hover, .message-box .button:active,
.message-box .buttonOutlined:hover, .message-box .buttonOutlined:active {
   background: #007BA0;
   border: 2px solid #007BA0;
   color: #fff;
}

.message-box .lpButton .button:only-child,
.message-box .lpButton .buttonOutlined:only-child {
   flex: 0.5;
}

.message-box .button-disabled {
   border: 2px solid #E6E6E6;
   background-color: #E6E6E6;
   color: #B1B1B1;
   cursor: inherit;
 }

.message-box .checkboxContainer {
   position: relative;
   float: left;
   margin-top: 10px;
}

.message-box .login_textfield,
.message-box .login_textfield_big,
.textfield {
   width: calc(100% - 26px);
   height: 38px;
   padding: 0 12px;
   font-family: 'Lato', sans-serif;
   font-size: 16px;
   background: #FAFAFA;
   border: none;
   border: 1px solid #DDDDDD;
   border-radius: 6px;
   color: #444;
}

.message-box .login_textfield:hover,
.message-box .login_textfield_big:hover,
.textfield:hover {
   background: #F2F2F2;
}

.message-box .login_textfield:focus,
.message-box .login_textfield_big:focus,
.textfield:focus {
   background: #FFFFFF;
   border: 1px solid #00ABDE;
   outline: none;
}

.message-box .login_textfield[readonly],
.message-box .login_textfield_big[readonly],
.textfield[readonly] {
   background: #f6f6f6;
}

.message-box .errorfield {
   border-color: #D50101;
}

.message-box .error {
   font-size: 14px;
   line-height: 16px;
}

.message-box .errortext {
   display: block;
   overflow: hidden;
   padding-left: 16px;
   color: #D50101;
   background: url('/Shared/Images/Object/SystemMessages/error_sign.gif') no-repeat;
   background-position: 0 60%;
}

.message-box .loginForm {
   width: auto;
}

.message-box .loginViewNormal .loginFormWrapper .loginWrapper,
.message-box .loginViewCompact .loginFormWrapper .loginWrapper,
.message-box .loginFormWrapper .loginWrapper .lfLabel,
.message-box .loginFormWrapper .loginWrapper .lfField,
.message-box .loginViewNormal .loginFormWrapper .passwordWrapper,
.message-box .loginFormWrapper .passwordWrapper .lfLabel,
.message-box .loginFormWrapper .passwordWrapper .lfField,
.message-box .authFormWrapper,
.message-box .authFormWrapper .passwordWrapper,
.message-box .authFormWrapper .passwordWrapper .lfLabel,
.message-box .authFormWrapper .passwordWrapper .lfField {
   position: relative;
   width: 100%;
   height: auto;
   float: left;
}

.message-box .passwordWrapper .passwordVisibilityToggle {
   width: 20px;
   height: 20px;
   position: absolute;
   top: 10px;
   right: 10px;
   background-image: url('/Shared/Images/Object/SystemMessages/visibility_off.svg');
   background-size: contain;
   background-repeat: no-repeat;
   cursor: pointer;
}

.message-box .passwordWrapper .passwordVisibilityToggle.off {
   background-image: url('/Shared/Images/Object/SystemMessages/visibility.svg');
}

.message-box .loginFormWrapper .passwordWrapper .lfLabel,
.message-box .loginFormWrapper .loginWrapper .lfLabel,
.message-box .authFormWrapper .lfLabel,
.lfLabel,
.rpText {
   float: left;
   width: 157px;
   padding-top: 10px;
   padding-right: 10px;
   font-size: 14px;
   font-weight: normal;
   margin-bottom: 8px;
}

.message-box .lfField .description {
   margin-top: 8px;
   opacity: 0.75;
}

.message-box .loginWrapper { overflow: hidden; }
.message-box .loginForm .break,
.rpText br,
.message-box .loginViewNormal .loginFormWrapper .break { display: none; }

.rpBackLink,
.message-box .loginFormWrapper .forgotPasswordLinkWrapper {
   margin: 8px 0;
}

div.lpButton {
   display: flex !important;
   justify-content: flex-end;
   float: left;
   gap: 10px;
   width: 100%;
   margin: 45px 0 0 0 !important;
}

.message-box .passwordWrapper ~ .lpButton,
.message-box .rpField ~ .rpButton {
   margin-top: 10px;
}

.message-box .forgotPasswordLinkWrapper a.plain,
.message-box .rpBackLink a.plain {
   font-size: 14px;
}

.message-box .loginViewNormal .loginFormWrapper .passwordWrapper {
   display: block;
   float: none;
   overflow: hidden;
}

.rpField {
   margin-bottom: 8px;
}

.table {
   width: 100%;
   margin: 10px 0;
}

.table td {
   padding: 15px 0;
   border-bottom: 1px solid #ccc;
}

.message-box .radio-button-container {
   display: flex;
   gap: 30px;
   margin-bottom: 15px;
}

.message-box .radio-button-container.underline {
   border-bottom: 1px solid #ddd;
}

.message-box .radio-button-container p {
   margin: 0;
}

.message-box .radio-button-label {
   padding-bottom: 20px;
   
}

.message-box .radio-button-label.underline {
   border-bottom: 1px solid #ddd;
}

#confirm-email-more {
   margin-top: 20px;
}

@media screen and (max-width: 1200px) {
   .message-box {
      width: calc(50% - 90px);
   }
}

@media screen and (max-width: 900px) {
   .message-box {
      width: calc(60% - 90px);
   }
}

@media screen and (max-width: 600px) {
   .container-box {
      justify-content: flex-start;
      background-color: #fff;
      background-size: 330%;
      background-position: 80% 110%;
   }
   
   .message-box {
      width: calc(100% - 50px);
      padding: 45px 25px 45px 25px;
      border-radius: 0;
   }

   .message-box .lpButton .button:only-child,
   .message-box .lpButton .buttonOutlined:only-child {
      flex: 1;
   }
}