* {
    box-sizing  : border-box;
    font-family : sans-serif;
    }

/*define animations*/
@-moz-keyframes    spin { 100% { -moz-transform : rotate(360deg);    }}
@-webkit-keyframes spin { 100% { -webkit-transform : rotate(360deg); }}

@keyframes spin {
    100% {
        -webkit-transform : rotate(360deg);
        transform         : rotate(360deg);
        }
    }

html, body {
    height : 100vh;
    margin : 0;
    }

::-webkit-input-placeholder {
    color : #999;
    }

.forgot-password {
    background-color : #f0eeeb;
    display          : flex;
    height           : 100%;
    position         : relative;
    }

.forgot-password .alert-modal-outer {
    align-items      : center;
    background-color : #00000080;
    bottom           : 0;
    display          : flex;
    justify-content  : center;
    left             : 0;
    position         : fixed;
    right            : 0;
    top              : 0;
    z-index          : 2;
    }

.forgot-password .alert-modal-outer .alert-modal-inner {
    background-color : #fff;
    border-radius    : 4px;
    box-shadow       : 0 14px 36px 2px rgb(0 0 0 / 15%);
    display          : flex;
    flex-direction   : column;
    max-height       : 90%;
    max-width        : 550px;
    width            : 90%;
    position         : relative;
    }

.forgot-password .alert-modal-outer .alert-modal-inner .top-color-bar {
    align-items             : center;
    border-top-right-radius : 4px;
    border-top-left-radius  : 4px;
    display                 : flex;
    justify-content         : center;
    padding                 : 8px 0px;
    }

.forgot-password .alert-modal-outer .alert-modal-inner .top-color-bar.danger {
    background-color : #dc3545;
    }

.forgot-password .alert-modal-outer .alert-modal-inner .top-color-bar.success {
    background-color : rgb(112,195,64);
    }

.forgot-password .alert-modal-outer .alert-modal-inner .top-color-bar img {
    height : 60px;
    }

.forgot-password .alert-modal-outer .alert-modal-inner .text-content {
    display         : flex;
    align-items     : center;
    justify-content : center;
    flex-wrap       : wrap;
    padding         : 15px;
    color           : #333;
    }

.forgot-password .alert-modal-outer .alert-modal-inner .text-content .title {
    color     : #333;
    font-size : 21px;
    }

.forgot-password .alert-modal-outer .alert-modal-inner .text-content .subtitle {
    color       : #484848;
    font-size   : 14px;
    font-weight : 400;
    line-height : 1.5;
    margin-top  : 6px;
    text-align  : center;
    white-space : pre-line;
    }

.forgot-password .alert-modal-outer .alert-modal-inner .text-content .subtitle:empty {
    display : none;
    }

.forgot-password .alert-modal-outer .alert-modal-inner .button-wrapper {
    align-items                : center;
    border-bottom-left-radius  : 4px;
    border-bottom-right-radius : 4px;
    display                    : flex;
    justify-content            : center;
    min-height                 : 57px;
    padding                    : 10px 0;
    width                      : 100%;
    }

.forgot-password .alert-modal-outer .alert-modal-inner .button-wrapper button {
    background-color : #fff;
    border-color     : #dce0e0;
    color            : #808183;
    font-weight      : normal;
    }

.forgot-password .alert-modal-outer .alert-modal-inner .button-wrapper button:not([disabled]):hover {
    background-color : #F2F2F2;
    border-color     : #F2F2F2;
    color            : #808183;
    }

.forgot-password button {
    -webkit-font-smoothing : antialiased;
    appearance             : none;
    background-color       : orange;
    border                 : 1px solid #0000;
    border-radius          : 6px;
    color                  : white;
    cursor                 : pointer;
    font-size              : 16px;
    font-weight            : 500;
    line-height            : 25px;
    outline                : none;
    padding                : 6px 16px;
    text-rendering         : optimizeLegibility;
    transition             : all ease .3s;
    }

.forgot-password button:disabled {
    cursor           : not-allowed;
    opacity          : 0.3;
    background-color : gray;
    }

.forgot-password button.cancel:hover, .forgot-password button.cancel:focus {
    background-color : #757575;
    }

.forgot-password button.cancel {
    background-color : #808080;
    }

.forgot-password button.submit:not(:disabled):hover, .forgot-password button.submit:not(:disabled):focus {
    background-color : #d68a00;
    }

.forgot-password .blue-card {
    background-color : #2c3e50a6;
    border-radius    : 8px;
    box-shadow       : 0 1px 2px rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%);
    margin           : 0px auto;
    margin-top       : 90px;
    padding          : 15px;
    width            : 275px;
    }

.forgot-password .blue-card .action-buttons-wrap {
    display         : flex;
    justify-content : space-between;
    margin-top      : 12px;
    }

.forgot-password .input-help-text {
    color         : #fff;
    font-size     : 12px;
    margin-bottom : 7px;
    text-align    : center;
    }

.forgot-password .blue-card .title {
    color         : white;
    font-size     : 24px;
    margin-bottom : 20px;
    text-align    : center;
    }

.forgot-password .card {
    background-color : white;
    border-radius    : 8px;
    min-width        : 290px; /* lowest minimum without running off the screen on iPhone 5/6/7 */
    max-width        : 400px;
    margin           : auto;
    box-shadow       : 0 1px 6px 0 rgb(60 64 67 / 28%);
    padding          : 15px;
    }

.forgot-password .mask-outer {
    align-items      : center;
    display          : flex;
    justify-content  : center;
    position         : absolute;
    inset            : 0;
    background-color : #00000080;
    z-index          : 2;
    }

.forgot-password .loading-image {
    -webkit-animation : spin 1.25s linear infinite;
    -moz-animation    : spin 1.25s linear infinite;
    animation         : spin 1.25s linear infinite;
    height            : 100px;
    user-select       : none;
    width             : 100px;
    }

.forgot-password .feedback-image {
    height : 65px;
    }

.forgot-password .feedback-image-outer {
    align-items     : center;
    display         : flex;
    height          : 75px;
    justify-content : center;
    }

.forgot-password .feedback-title-outer {
    align-items     : center;
    display         : flex;
    flex-wrap       : wrap;
    justify-content : center;
    padding         : 15px;
    }

.forgot-password .feedback-title {
    color          : #333;
    font-size      : 21px;
    margin-top     : 12px;
    padding-bottom : 4px;
    text-align     : center;
    width          : 100%;
    }

.forgot-password .feedback-subtitle {
    color       : #484848;
    font-size   : 15px;
    font-weight : 400;
    line-height : 1.5;
    text-align  : center;
    white-space : pre-line;
    }

.forgot-password .screen {
    background      : url("/public/img/Background.jpg") no-repeat center center fixed;
    background-size : cover;
    flex            : 1;
    }

.forgot-password input[type="text"] {
    display            : block;
    width              : 100%;
    padding            : 10px 12px;
    font-size          : 16px;
    line-height        : 1.42857143;
    color              : #555;
    background-color   : #fff;
    background-image   : none;
    border             : 1px solid #ccc;
    border-radius      : 4px;
    -webkit-box-shadow : inset 0 1px 1px rgb(0 0 0 / 8%);
    box-shadow         : inset 0 1px 1px rgb(0 0 0 / 8%);
    -webkit-transition : border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition      : border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition         : border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }

.forgot-password input[type="text"]:focus {
    border-color : #66afe9;
    box-shadow   : inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
    outline      : 0;
    }