: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 ****************************/