/* ======================================================================== */
/* Source: /v2/public/css/apps/myprofile/screen.css */
/* ======================================================================== */

/* Base: Layout
------------------------------------------------ */
.layout-page .layout-content {
    padding: 100px 20px 40px;
}

@media (min-width: 1199px){
    .layout-page .layout-content{max-width:none;width:1280px;}
}

/* Template: Invitation
------------------------------------------------ */
.app-myprofile.tpl-invitation .ui-header{margin-bottom:3em;padding:0 1em 1em;}

.app-myprofile.tpl-invitation-member .section-registration-invitation .register-form .form-register{width:480px;}

.app-myprofile.tpl-invitation-member .section-registration-invitation .register-form .fieldset-login{margin:0 0 3em;}
.app-myprofile.tpl-invitation-member .section-registration-invitation .register-form .fieldset-login .input{width:320px;}

.app-myprofile.tpl-invitation-member .section-registration-invitation .register-form .fieldset-member{margin:0 0 3em;}

/* Template: Invitation Member / Buyer Activate — Layout overrides
------------------------------------------------ */
.app-myprofile.tpl-invitation-member .layout-content,
.app-myprofile.tpl-invitation-buyer_activate .layout-content {padding: 0; min-height: 0; max-width: none; width: 100%;}
.app-myprofile.tpl-invitation-member,
.app-myprofile.tpl-invitation-buyer_activate {background: #fff;}
.module-member-invitation-error {padding: 100px 0 40px;}

/* Template: Invitation Member — Hero
------------------------------------------------ */
.module-member-invitation-hero {padding-top: 70px; background: var(--color-grey-lighter); position: relative; overflow: hidden;}
.module-member-invitation-hero .module-member-invitation-hero-container {position: relative;}
.module-member-invitation-hero .hero-background-image {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; object-fit: cover;}
.module-member-invitation-hero .hero-content {position: relative; z-index: 1; padding: 30px 40px 40px;}

.module-member-invitation-hero .hero-header .hero-brand-logo {padding-bottom: 20px;}
.module-member-invitation-hero .hero-header .hero-brand-logo img {width: 85px; height: auto;}
.module-member-invitation-hero .hero-header .hero-title {font-size: 32px; font-weight: 400; color: #fff;}
.module-member-invitation-hero .hero-header .hero-subtitle {font-size: 20px; color: #fff; margin: 0;}

.module-member-invitation-hero .hero-card {background: #fff; border-radius: 16px; box-shadow: 0 1px 40px rgba(0, 0, 0, 0.2); padding: 40px;}
.module-member-invitation-hero .hero-card .card-header {padding-bottom: 24px;}
.module-member-invitation-hero .hero-card .card-header p {font-size: 14px; text-align: center; margin: 0;}
.module-member-invitation-hero .hero-card .card-header .card-header-title {font-size: 17px; text-align: center; margin: 0; font-weight: 600;}
.module-member-invitation-hero .hero-card .card-header .card-header-subtitle {font-size: 14px; color: #666; padding-top: 4px; text-align: center;}

.module-member-invitation-hero .hero-card .form-field {padding-bottom: 16px;}
.module-member-invitation-hero .hero-card .form-field label {display: block; font-size: 13px; padding-bottom: 4px; color: #666;}
.module-member-invitation-hero .hero-card .form-field label.error {color: #e00; padding-top: 8px; padding-bottom: 0;}
.module-member-invitation-hero .hero-card .form-field .input {width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; box-shadow: none;}
.module-member-invitation-hero .hero-card .form-field input.input:read-only,
.module-member-invitation-hero .hero-card .form-field input.input:disabled {background: var(--color-grey-light); border: var(--color-grey-light); color: var(--color-grey-dark);}

.module-member-invitation-hero .hero-card .form-field-name {display: flex; gap: 12px;}
.module-member-invitation-hero .hero-card .form-field-name .input-gender {width: 80px; margin-right: 12px; padding: 10px 6px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px;}
.module-member-invitation-hero .hero-card .form-field-name .input {box-shadow: none;}
.module-member-invitation-hero .hero-card .form-field-name input.input {flex: 1; min-width: 0;}

.module-member-invitation-hero .hero-card .sso-notice {display: flex; gap: 16px; padding: 8px 18px 10px 16px; border: 1px solid #ddd; border-radius: 10px; margin-top: 16px;}
.module-member-invitation-hero .hero-card .sso-notice .sso-notice-icon {width: 24px; height: 24px; flex-shrink: 0; margin-top: 4px; background-image: none; stroke: #000;}
.module-member-invitation-hero .hero-card .sso-notice p {font-size: 13px; color: #444; margin: 0; line-height: 1.4;}

.module-member-invitation-hero .hero-card .form-field-terms {padding: 20px 0 24px; position: relative;}
.module-member-invitation-hero .hero-card .form-field-terms label.error {display: block; width: auto; color: #e00; font-size: 13px; padding-top: 8px; margin-left: 25px;}
.module-member-invitation-hero .hero-card.hero-card-sso .form-field-terms {padding: 24px 0;}
.module-member-invitation-hero .hero-card .form-field-terms .checkbox-label {display: flex; align-items: flex-start; gap: 8px; padding: 0; margin-left: 3px; color: #000; font-size: 13px; cursor: pointer;}
.module-member-invitation-hero .hero-card .form-field-terms .checkbox-label input {margin-top: 2px; flex-shrink: 0;}
.module-member-invitation-hero .hero-card .form-field-terms .checkbox-label a {color: #000; text-decoration: underline;}

.module-member-invitation-hero .hero-card .form-field-submit {padding-bottom: 0;}
.module-member-invitation-hero .hero-card .form-field-submit .lnb-button-submit {width: 100%; padding: 16px 16px 14px; line-height: 22px; background: #000; color: #fff; border: none; border-radius: 5px; font-size: 13px; letter-spacing: 0.01em; cursor: pointer; text-transform: uppercase;}
.module-member-invitation-hero .hero-card .form-field-submit .lnb-button-submit:hover {background: #333;}

@media (max-width: 576px) {
    .module-member-invitation-hero .hero-background-image {height: 240px; position: relative;}
    .module-member-invitation-hero .hero-content {flex-direction: column; padding: 0;}
    .module-member-invitation-hero .hero-header {padding: 16px; position: absolute; top: 140px; z-index: 1;}
    .module-member-invitation-hero .hero-card {width: auto; border-radius: 0; box-shadow: none; padding: 24px 16px;}
}

/* Template: Member
------------------------------------------------ */
.app-myprofile.tpl-member .input-first-name{width:100px;}
.app-myprofile.tpl-member .input-name{width:140px;}

.app-myprofile.tpl-member .module-invitations{clear:both;}
.app-myprofile.tpl-member .module-invitations .invitation{clear:both;margin-bottom:15px;padding-bottom:15px;border-bottom:1px dotted #ccc;}
.app-myprofile.tpl-member .module-invitations .invitation:last-child{margin-bottom:0;border-bottom:0;}
.app-myprofile.tpl-member .module-invitations .invitation .brand-name{display:block;float:left;width:150px;font-weight:bold;}
.app-myprofile.tpl-member .module-invitations .invitation .role-name{display:block;float:left;width:150px;}
.app-myprofile.tpl-member .module-invitations .invitation .date-name{display:block;float:left;width:200px;font-style:italic;}
.app-myprofile.tpl-member .module-invitations .invitation .invitation-status{float:right;}
.app-myprofile.tpl-member .module-invitations .invitation .invitation-status .invitation-cta-accept{float:left;margin:-5px 12px 0 0;}
.app-myprofile.tpl-member .module-invitations .invitation .invitation-status .invitation-cta-decline{margin-left:10px;font-weight:bold;color:#444;}
.app-myprofile.tpl-member .module-invitations .invitation .invitation-status .invitation-cta:hover{color:#069;}

/* Template: Member
------------------------------------------------ */
.app-myprofile.tpl-login-notify .module-login .module-content{text-align:center;}

/* Template: Login
------------------------------------------------ */
.app-myprofile.tpl-login-login .layout-content > .module-flash-notify{margin:0 40px;}

/* Module: Notifications
------------------------------------------------ */
.layout-content > .module-flash-notify{position:relative;top:initial;margin:-10px 0 50px 0;width:auto;}