/*
 * Copyright (c) 2022 Ethoca
 * All Rights Reserved.
 * No part of this software may be reproduced, stored, used, modified or transmitted in any form or in any means
 * (including without limitation, electronic, mechanical, photocopying, recording or otherwise) without the prior
 * express written consent of Ethoca which may be withheld in Ethoca's sole and absolute discretion
 */

/*
    Copied from https://gitlab.ethoca.com/clarity/clarity-self-serve-portal-service/-/blob/dev/src/main/resources/static/selfserve/css/heracles-dxp-wrapper.css
    TODO: Determine if this is the standard for Clarity projects.
 */
/* Override the default HTML elements */
html, body { /* set the page full width so we can set background colours behind images to stretch the entire canvas */
    height: 100vh;
}

/* Create re-usable classes. Please ensure the names are generic and the styles are simple and modular */
.b2b-background-color {
    background-color: #141413;
}

.side-padding {
    padding-left: 12.5%;
    padding-right: 12.5%;
}

.top-padding-40 {
    padding-top: 40px;
}

.top-padding-80 {
    padding-top: 80px;
}

.auto-size {
    width: 100% !important;
    height: auto !important;
}

.error-image {
    max-width: 600px;
    max-height: 600px
}

.responsive-side-padding {
    padding-left: 12.5%;
    padding-right: 12.5%;
}

/* For once off components use id's */
#heracles-notification {
    margin: 5px 0px 15px 0px;
}

#heracles-notification dxp-message-text {
    margin: 5px 0px 10px 0px;
}

/* For responsive layouts */
@media screen and (min-width: 992px) {
    /*992px width is lg size*/
    .responsive-pane-with-side_img {
        background: linear-gradient(90deg, #FFFFFF 50%, #323231 50%);
        height: calc(100vh - 56px);
        overflow: hidden;
    }

    .responsive-side-padding {
        padding-left: 25% !important;
        padding-right: 25% !important;
    }

    .responsive-pr-10-percent {
        padding-right: 10%;
    }
}

/* Hacks to default DXP Styling to make it look like their mock ups - Please avoid this if at all possible. DXP should style their mock ups in accordance with their components */
.dxp-btn {
    font-size: 14px !important;
    padding: .6rem 3.4rem !important;
    line-height: 18px !important;
}

.dxp .dxp-theme-white .dxp-inputbox-label {
    font-size: .75rem !important; /* Get normal labels to match password labels under all conditions (error & normal) */
    font-weight: 400 !important;
    line-height: 1.5 !important;
    margin: 0 0 .25rem 0 !important;
    color: #141413 !important;
}

.dxp span[aria-hidden=true] {
    display: none !important; /* Hide the asterix for input fields to make it match pw fields */
}