:root {
    /******** COLORS START **************/
    --body-color: #F2F2F2;
    --hyper-link-text-color: #212529;
    --body-text-color: #212529;
    --required-text-color: #dc3545;
    --label-text-color: #20c997;
    --submit-button-text-color:  #212529;
    --submit-button-bg-color: #FED100;
    --submit-button-bg-hover-color: #E0A759;
    --cancel-button-text-color: #dee2e6;
    --cancel-button-bg-color: #FF3D4A;
    --cancel-button-bg-hover-color: #FF3D4A;
    --reset-button-text-color: #dee2e6;
    --reset-button-bg-color: #C3DFFA;
    --reset-button-bg-hover-color: #C3DFFA;
    /******** COLORS END **************/

    /******** FONT START **************/
    /******** FONT END **************/

    /******** FONT SIZE START **************/
    /******** FONT SIZE END **************/

    /******** RADIUS SIZE START **************/
    --radius-standard: 15px;
    --radius-input: 15px;
    --radius-button: 15px;
    /******** RADIUS SIZE END **************/

    /******** MARGIN START **************/
    --input-standard-adjust-margin: 0 0 0 -5px;
    /******** MARGIN END **************/

    /******** WIDTH START **************/
    /******** WIDTH END **************/

    /******** PADDING START **************/
    --btn-standard-padding: 5px 15px 5px 15px;
    /******** PADDING END **************/


}

html {
    height: 100%;
    width: 100%;
}

body {
    height: 100%;
    width: 100%;
    background-color: var(--body-color);
    color: var(--body-text-color);
}

.flex-container {
    display: flex;
}

.gap-filler {
    flex-grow: 1;
}

.shadow-box {
    box-shadow: 5px 5px #efefef;
}

.br-standard {
    border-radius: 15px;
}

.e-input-text {
    border-radius: var(--radius-input);
    margin: var(--input-standard-adjust-margin);
}

.e-input-password {
    border-radius: var(--radius-input);
    margin: var(--input-standard-adjust-margin);
}

.e-required {
    color: var(--required-text-color);
}

.e-label {
    color: var(--label-text-color);
}

.e-btn-a {
    text-decoration: none;
}

.e-hyper-link-text {
    color: var(--hyper-link-text-color);
}


.e-btn-submit {
    border-radius: var(--radius-button);
    background-color: var(--submit-button-bg-color);
    color: var(--submit-button-text-color);
    padding: var(--btn-standard-padding);
}

.e-btn-submit:hover{
    background-color: var(--submit-button-bg-hover-color);
    color: var(--submit-button-text-color);
}

.e-btn-cancel {
    border-radius: var(--radius-button);
    background-color: var(--cancel-button-bg-color);
    color: var(--cancel-button-text-color);
    padding: var(--btn-standard-padding);
}
.e-btn-cancel:hover {
    background-color: var(--cancel-button-bg-hover-color);
    color: var(--cancel-button-text-color);
}
.e-btn-reset {
    border-radius: var(--radius-button);
    background-color: var(--reset-button-bg-color);
    color: var(--reset-button-text-color);
    padding: var(--btn-standard-padding);
}

.e-btn-reset:hover{
    background-color: var(--reset-button-bg-hover-color);
    color: var(--reset-button-text-color);
}

/******************* LOGIN PAGE START ****************************/

.login-form-wrap {
    background-color: #ffffff;
}

.login-form {
    min-width: 400px;
    max-width: 600px;
}

.login-page-logo {
    height: 150px;
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

.login-brand {
    height: 75px;
}

.login-wrap {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/******************* LOGIN PAGE END ****************************/


/******* posh login screen *******/
.main-body{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
}
.login-container{
    height: 520px;
    width: 700px;
    display:flex;
    flex-direction: column;
    align-items:center;
    background-color: #f2f2f2;
    font-size: 18px !important;
    justify-content: center;
}
.login-fields{
    margin-top:10px;
}

.username, .password{
    display: flex;
    /*justify-content: center;*/
    margin-top: 40px;
    font-size: 22px;
}
.login-button{
    width: 398px;
    height: 45px;
    background-color: #0bbf26;
    margin-top: 30px;
    border: none;
    border-radius: 30px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-login{
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.new-login-input-fields{
    width: 400px;
    height: 50px;
    border-right: none;
    border-top-left-radius: 23px !important;
    border-bottom-left-radius: 23px !important;
}
.toggle-password-field{
    display: flex;
    align-items: center;
    border: 1px solid #BDBDBD;
    border-left: none;
    border-top-right-radius: 22px;
    border-bottom-right-radius: 22px;
    padding: 0rem 1rem;
    background-color: #fff;
}
.reset-password{
    color: blue;
}
.logged-in-user-info-outer-ring{
    border-radius: 50%;
    background: #95AEC7;
    padding: 4px;
    width: 80px;
    height: 80px;
    border: 1px solid #0000002B;
}
.logged-in-user-info-inner-ring {
    border: 3px solid #FFFFFF;
    border-radius: 50%;
    background: #95AEC7;
    padding: 0px;
    width: 65px;
    height: 65px;
    margin-top: 2px;
    margin-left: 2px;
}
#password:focus, #userName:focus {
    border: 1px solid #ced4da;
    box-shadow: none;
}
.new-login-input-fields:focus {
    border-right: none !important;
}
/******* end of posh login screen *******/

#username,#password{
    font-size: 22px;
}
.login-input-fields{
    margin-top: 3rem!important;
}
.field-validation-error{
    color: red;
    padding-left: 10px;
}
.logged-in-screen-icon{
    width: 35px;
    height: 35px;
    margin-top: 9px;
}