/**
 * CSS for Epic linking flow and new oauth base design.
 *
 * IMPORTANT!
 * Check ControllerBase.php when releasing to remove this from internal use only
 * Copy this into the base css or give this a better name and import it into the base css
 * A lot of these are to make it work until we can remake the base styleing in ARC-7528
 *
 */
.new-account.new-design {
    margin-top: 20px;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
} 

.new-account.new-design .new-account__btn {
    margin-left: 5px;
}
.resend-verification__btn {
    font-size: 16px;
    color: #fff;
    border: none !important;
    outline: none !important;
    background-color: transparent !important;
    padding: 0;
    box-shadow: none !important;
    vertical-align: baseline;
}
.resend-verification__btn:active,
.resend-verification__btn:hover,
.resend-verification__btn:focus {
    color: #fff;
}

html {
    height: 100%;
}
body {
    display: grid;
    padding: 0;
    height: 100%;
}
.login-link {
    margin: auto;
}
.error-screen {
    padding: 5px 20px;
}
.link-flow {
    height: 100%;
    width: auto;
    background: #131418;
    margin: 0;
}
.new-design .account-column {
    font-size: 16px;
    max-width: 420px;
}
/** we need to move this file to includes so we can override this file
 * .form-group {
 *     margin-bottom: 15px;
 * }
 */

.login-title {
    color: #fff;
}
.account-column {
    padding-top: 10px;
}
.input-group-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}
.page-summary {
    margin: 20px 0;
}
.page-summary--highlight {
    color: #fff;
}
.account-wall--epic-linking {
    margin-top: 0px;
}
.account-wall--epic-linking .btn-primary {
    white-space: normal;
    height: auto;
    margin: 6px 0px;
}
.btn.btn--image {
    width: 46px;
    height: 46px;
    border: none;
    margin: 0 10px;
    border-radius: 2px;
}
.btn.btn--image:focus {
    outline: none;
}
.btn.btn--image:hover {
    border: none;
}
.btn.facebook-login-btn {
    font-size: 24px;
    color: #fff;
    background-color: #3B5998;
}
.btn.facebook-login-btn:hover {
    background-color: #5170B1;
}
.btn.epic-login-btn {
    background-color: #3D3D3D;
}
.btn.epic-login-btn:hover {
    background-color: #474747;
}
.linking-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    background-color: #FFFFFF0D;
}
.linking-logos i {
    color: #fff;
    margin: 0 8px;
    font-size: 16px;
}
.link-logo-arc {
    width: 79px;
}

.new-design .checkbox-group {
    margin: 20px 0;
}
.new-design .checkbox.checkbox {
    font-size: 14px;
}
.new-design .checkbox.checkbox + .checkbox.checkbox {
    margin-top: 10px;
}
.new-design .form-arc {
    max-width: 100%;
}

.text-error {
    margin-bottom: 10px;
}

/* HR with text */
.strike {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; 
    margin: 10px 0;
}
  
.strike > span {
    position: relative;
    display: inline-block;
}
  
.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: rgba(255,255,255,0.20);
}
  
.strike > span:before {
    right: 100%;
    margin-right: 15px;
}
  
.strike > span:after {
    left: 100%;
    margin-left: 15px;
}