/* Forgot Password component syling */
.kb2b-forgot-password {
    background:  #F4F4F4;
    padding-top: 60px !important;
    padding-bottom: 40px !important;  
}

/* Box content */
.kb2b-box-forgot-password {
    /* Text on top */
    .comm-forgot-password__title[lwc-3fmj06unklg] {
        font-size: 37px !important;
        color:#002B4E !important;
        font-weight: 700 !important;
        padding: 0px 0px 25px !important;
        font-style: normal !important;
        line-height: 48.1px !important;
        font-family: "LeagueSpartan-Bold" !important;
    }

    /* Box Styling */
    .comm-forgot-password__container[lwc-3fmj06unklg] {
        gap: 20px !important;
        padding: 20px !important;
        font-size: 18px !important;
        box-shadow: none !important;
        font-weight: 400 !important;
        line-height: 27px !important;
        color:  #002B4E !important;
        font-style: normal !important;
        border-radius: 12px !important;
        margin-bottom: 60px !important;
        border-color: transparent !important;
        background-color: #FFF !important;
        font-family: "PTSans-Regular" !important;  
    }  

    /* Input User Name field style*/
    .comm-forgot-password__username-input.slds-p-top_small.slds-form-element {
        margin: 0px !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;

        /* Input title text */
        .slds-form-element__label {
            font-size: 16px !important;
            font-weight: 400 !important;
            color:  #002B4E !important;
            margin-bottom: 4px !important;
            font-style: normal !important;
            padding-left: 16px !important;
            line-height: 19.2px !important;
            font-family: "PTSans-Regular" !important;
        }

        /* Input box style */
        .slds-input {
            gap: 8px !important;
            display: flex !important;
            font-size: 18px !important;
            font-weight: 400 !important;
            line-height: 27px !important;
            color: #002B4E !important;
            font-style: normal !important;
            padding: 12px 16px !important;
            border-radius: 8px !important;
            align-self: stretch !important;
            background: #F4F4F4 !important;
            flex-direction: column !important;
            justify-content: center !important;
            align-items: flex-start !important;
            border: 1px solid #002B4E !important;
            font-family: "PTSans-Regular" !important;
        }
    }

    /* Buttton Hover */
    .comm-forgot-password__submit-button:hover,
    .comm-forgot-password__cancel-button:hover {
        text-decoration: none !important;
    }

    /* Buttton Focus */
    .comm-forgot-password__submit-button:focus,
    .comm-forgot-password__cancel-button:focus {
        box-shadow: none !important;
        text-decoration: none !important;
    }

    /* Button focus-visible  */
    .comm-forgot-password__submit-button:focus-visible,
    .comm-forgot-password__cancel-button:focus-visible {
        border-style: none !important;
        clip-path: view-box !important;
        outline-color: unset !important;
        outline-style: unset !important;
    }

    /* Mobile screens: Align buttons in a column */
    .slds-form-element.slds-m-top_large.slds-m-bottom_large {
        gap: 16px !important; 
        margin: 0px !important;
        display: flex !important;
        align-items: center !important;
        flex-direction: column !important; 
    }
    
    /* Buttton Cancel */
    .comm-forgot-password__cancel-button[lwc-3fmj06unklg] {
        order: 2 !important;
        width: 100% !important;
        height: 42px !important;
        padding: 16px !important;
        font-size: 18px !important;
        color: #11528F !important;
        font-weight: 700 !important;
        line-height: 27px !important;
        margin-right: 0px !important;
        font-style: normal !important;
        font-family: "PTSans-Bold" !important;
        border: 1px solid #11528F !important;
    }

    /* Buttton Reset Password */
    .comm-forgot-password__submit-button[lwc-3fmj06unklg] {
        Order: 1 !important;
        width: 100% !important;
        height: 42px !important;
        padding: 16px !important;
        font-size: 18px !important;
        margin-left: 0px !important;
        font-weight: 700 !important;
        line-height: 27px !important;
        font-style: normal !important;
        background: #11528F !important;
        font-family: "PTSans-Bold" !important;
        border-top-color: transparent !important;
        border-left-color: transparent !important;
        border-right-color: transparent !important;
        border-bottom-color: transparent !important;
    }

    /* Tablet and larger screens: Align buttons side by side */
    @media only screen and (min-width: 768px) {
        .slds-form-element.slds-m-top_large.slds-m-bottom_large {
            flex-direction: row !important;
            justify-content: flex-start !important;
        }
        
        .comm-forgot-password__cancel-button[lwc-3fmj06unklg] {
            order: 1 !important;
            width: 49% !important;
            margin-right: 3px !important;
        }
    
        .comm-forgot-password__submit-button[lwc-3fmj06unklg] {
            order: 2 !important;
            width: 49% !important;
            margin-left: 4px !important;
        }
    }

    /* Error Message styling */
    .comm-login-error__container.slds-form-element__control  {  
        padding: 8px !important;
        border-radius: 8px !important;
        margin-bottom: 20px !important;
        background: #F6C7C7 !important;
      
        .formatted-rich-text {
            font-size: 18px !important;
            color: #5F2020 !important;
            font-weight: 400 !important;
            line-height: 27px !important;
            font-style: normal !important;
            font-family: "PTSans-Regular" !important;
        }
    }        
}