﻿.btn-toast {
    background: transparent !important;
    border: 0 !important;
    width: 100% !important;
}
.error-message {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #e01723;
    text-align: center;
    background-color: #ffdede;
    margin-top: 10px;
}

.help-icon {
    background-image: url(../../../images/RAP/Brand/help.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-left: 7px;
    z-index: 1;
}

.model-block-with {
    width: 28% !important
}
.model-block-with .heading-container {
    align-items: center !important;
    position: relative;
}

.help-icon:hover::before, .set-answers:hover::before {
    content: "";
    position: absolute;
    width: 10px;
    margin-top: 19px;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #f5f5f5;
    border-left: 10px solid transparent;
}

.help-icon:hover::after, .validate-answers-admin:hover::after, .validate-answers-viewonly:hover::after {
    position: absolute;
    width: auto;
    background: #f5f5f5;
    border-radius: 8px;
    top: 58px;
    right: 0;
    left: 0;
    margin: 0 25px;
    text-align: center;
    padding: 10px;
    border: 1px solid #000000;
}

.mandatory-mark {
    color: #dc0032;
    padding-left: 2px;
}

.help-icon:hover::after {
    content: "Provide answers to these security questions. Whenever you login, system will prompt  answer for any one of the questions you selected.";
}

.validate-answers-viewonly:hover::after {
    content: "You can answer any 3 of questions that were setup earlier by you";
}

.validate-answers-admin:hover::after {
    content: "You can answer any 4 of questions that were setup earlier by you";
}

.hide-with-space {
    visibility: hidden !important;
}

.hide {
    display: none !important;
}

.modal-wrapper.show-modal-wrapper {
    display: flex !important;
    opacity: 1 !important;
}



.modal-wrapper .un-selected {
    border: 1px solid #e01723 !important;
}

.modal-wrapper.reset-password {
}

    .modal-wrapper.reset-password .modal-block {
        width: 50%;
    }

        .modal-wrapper.reset-password .modal-block .confirmation-content-wrapper {
            width: 100%;
            padding: 5px !important;
            font-size: 12px !important;
            display: block !important;
        }

.modal-wrapper.set-security-questions .modal-block .confirmation-content-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


.modal-wrapper.reset-password .modal-block .confirmation-content-wrapper .login-block-form {
    width: 100%;
    padding: 2px !important;
    position: relative !important;
}

    .modal-wrapper.reset-password .modal-block .confirmation-content-wrapper .login-block-form .show-password-block {
        margin-top: 10px !important;
    }

    .modal-wrapper.reset-password .modal-block .confirmation-content-wrapper .login-block-form .button-holder {
        display: none !important;
        opacity: 0 !important;
    }

    .modal-wrapper.reset-password .modal-block .confirmation-content-wrapper .login-block-form .password-strength {
        padding-top: 2px !important;
        margin-bottom: 0px !important;
        padding-bottom: 5px !important;
    }

        .modal-wrapper.reset-password .modal-block .confirmation-content-wrapper .login-block-form .password-strength .h6-style-guide {
            padding-bottom: 0px !important;
            margin-bottom: 0px !important;
        }

        .modal-wrapper.reset-password .modal-block .confirmation-content-wrapper .login-block-form .password-strength ul.conditions > li {
            padding-bottom: 0px !important;
            margin-bottom: 2px !important;
        }

    .modal-wrapper.reset-password .modal-block .confirmation-content-wrapper .login-block-form input.input-field {
        margin-top: 0px !important;
        margin-bottom: 0px !important;
        padding-top: 5px !important;
        padding-bottom: 0px !important;
        padding-left: 5px !important;
        height: 30px;
    }

    .modal-wrapper.reset-password .modal-block .confirmation-content-wrapper .login-block-form label {
        font-size: 12px;
    }


.modal-wrapper.feedback .modal-block .confirmation-content-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.modal-wrapper.set-security-questions .modal-block .confirmation-content-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


.modal-wrapper.feedback .modal-block .feedback-heading-container,
.modal-wrapper.set-security-questions .modal-block .heading-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 20px;
    padding-bottom: 0px !important;
}

.modal-wrapper.feedback .modal-block .confirmation-content-wrapper > *,
.modal-wrapper.set-security-questions .modal-block .confirmation-content-wrapper > * {
    width: 100%;
}

.modal-wrapper.feedback .modal-block .confirmation-content-wrapper textarea {
    padding: 5px;
    width: 100%;
}

.modal-wrapper.feedback .modal-block .confirmation-content-wrapper .counter-placeholder {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}



.modal-wrapper.feedback .modal-block .empty-comments {
    border: 1px solid #e01723;
}


.input-field.password-field {
    margin-bottom: 10px !important;
}

.password-strength {
    padding-top: 0.5rem;
    padding-bottom: 1.25rem;
}

    .password-strength .h6-style-guide,
    .password-strength h6 {
        font-size: 1.125rem;
        color: #333;
        margin-bottom: 1.25rem;
    }

    .password-strength .conditions {
        margin-bottom: 0;
        list-style: none;
    }

        .password-strength .conditions li.valid {
            color: green;
        }

    .password-strength .chars-checkmark, .digits-checkmark, .letters-checkmark, .match-checkmark, .restricted-checkmark, .special-checkmark {
        height: 11px;
        max-width: 0.875rem;
        margin: 6px 0.625rem 0 0;
    }

    .password-strength .conditions-text {
        display: inline-block;
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: 0;
    }


    .password-strength .conditions li.invalid {
        float: none !important;
        color: #e51937 !important;
    }

    .password-strength .conditions li.valid {
        color: green;
    }

    .password-strength .conditions li.invalid, .password-strength .conditions li.valid {
        list-style-type: none;
    }

    .password-strength .conditions li:not(:last-child) {
        margin-bottom: 0.625rem;
    }

    .password-strength #api li {
        list-style-type: none;
    }

    .password-strength .conditions li {
        display: flex;
    }

    .password-strength .conditions img.invalid-checkmark {
        width: 11px;
        height: 11px;
    }

    .password-strength .password-strength-bullet-point {
        max-width: 0.3rem;
        margin-right: 1rem;
    }
.security-questions-list {
    border: 1px solid #e7e4e4;
    padding: 7px 4px;
    font-size: 14px;
    width: 97%;
    margin-bottom: 13px;
    border-radius: 5px;
}

.security-questions-answer-input, .security-questions-input {
    height: 34px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 13px;
    padding: 7px 8px;
    width: 97%;
    margin-bottom: 10px;
}

.addconfirmation-button {
    padding: 5px 18px;
    border-radius: 5px;
    font-size: 13px;
    margin-bottom: 15px;
    width: 100%;
    text-align: center;
}

.errormessage-box {
    font-size: 13px;
}

.add-ques-wrap {
    background: #f1f1f1;
    padding: 11px 10px 0 10px;
    border-radius: 10px;
}

.addmore-button-block {
    padding: 0 12px;
}

.confirmation-button-block {
    font-size: small;
}

@media(max-width: 767px) {
    .modal-wrapper.reset-password .modal-block .confirmation-content-wrapper .login-block-form .password-strength .h6-style-guide {
        font-size: 12px
    }

    .modal-wrapper.reset-password .modal-block .confirmation-content-wrapper .login-block-form .password-strength ul.conditions {
        padding-left: 15px;
        font-size: 10px;
        line-height: 21px;
    }
}
