:root {
    --msgBackColor: rgb(231, 127, 114);
    --msgFrontkColor: rgb(255, 255, 255);
    --mainBackColor: rgb(14, 120, 190);
    --mainFrontColor: rgb(255, 255, 255);
    --altBackColor: rgb(255, 255, 255);
    --altFrontColor: rgb(0, 0, 0);
    --rowMainBackColor: rgb(118, 159, 187);
    --rowMainFrontColor: rgb(255, 255, 255);
    --rowAltBackColor: rgb(196, 214, 226);
    --rowAltFrontColor: rgb(0, 0, 0);
}

html {
    width: 100%;
    height: 100%;
}
body {
    margin: 0;
    height: 100%;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 32px;
}

/* login */
.loginBg{
    width:100%;
    height:100%;
    background-color: var(--mainBackColor);
    color: var(--mainFrontColor);
    text-align: center;
}
.loginLogoContainer{
    position: absolute;
    width: 60%;
    left: 20%;
    top: 15%;
}
.loginLogo{
    font-size: 120%;
    font-weight: bold;
}
.loginSlogan{
    font-size: 50%;
}
.loginDataContainer{
    position: absolute;
    width: 80%;
    left: 10%;
    top: 40%;

}
.loginInput:focus-visible {
    outline: 2px solid var(--mainFrontColor);
}
.loginInput{
    width: 100%;
    height: 35px;
    background-color: transparent;
    border: 0.5px solid var(--mainFrontColor);
    color: var(--mainFrontColor);
    border-radius: 5px;
    text-align: center;
    font-size: 75%
}
.loginInput::placeholder{
    color:rgb(119, 168, 201)
}
.loginButton{
    width: 100%;
    height: 35px;
    background-color: var(--mainFrontColor);
    border: 0.5px solid var(--mainFrontColor);
    color: var(--mainBackColor);
    border-radius: 5px;
    text-align: center;
    padding: 2px;
    line-height: 35px;
    font-size: 75%;
    margin-top: 15px;
}
.loginUser{

}
.loginPwd{
    
}

.loginCopywriteContainer{
    position: absolute;
    width: 95%;
    bottom: 2%;
}
.loginCopywriteText{
    color: var(--mainFrontColor);
    font-size: 30%;
}
.loginMessageContainer{
    position: fixed;
    width: 60%;
    background-color: var(--msgBackColor);
    color: var(--msgFrontkColor);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    top: -100px;
    left: 18%;
    transition: top 1s;
    text-align: center;
    font-size: 50%;
    padding: 10px;
}

/* home */
.homeBg{
    width:100%;
    height:100%;
    background-color: var(--altBackColor);
    color: var(--altFrontColor);
    text-align: center;
}
.homeTitleCont{
    display: table;
    width: 100%;
    height: 10%;
    background-color: var(--mainBackColor);
}
.homeRecordsCont{
    display: table;
    width: 100%;
    height: 85%;
    background-color: var(--altBackColor);
}
.homeFooterCont{
    display: table;
    border-spacing: 5px;
    width: 100%;
    height: 5%;
    background-color: var(--mainBackColor);
}
.homeTitleCell{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: var(--mainFrontColor);
}
.homeTitleRefresh{
    width: 10%;
    font-size:80%;
}
.homeTitleTitle{
    font-size: 50%;
}
.homeTitleExit{
    width: 10%;
    font-size: 80%;
}

.recordsHeaders {
    display: block;
    width: 100%;
    height: 5%;
}
    .recordsHdr{
        display: table-cell;
        vertical-align: middle;
        font-size: 40%;
        padding: 5px;
        font-weight: bold;
    }
    .recordsHdrSt{
        text-align: center;
        width: 5%;
    }
    .recordsHdrType{
        text-align: center;
        width: 15%;
    }
    .recordsHdrTime{
        text-align: center;
        width: 20%;
    }
    .recordsHdrName{
        text-align: left;
    }
    .recordsHdrAmt{
        text-align: right;
        width: 25%;
    }

.recordsDetails{
    display: block;
    height: 95%;
    overflow: auto;
}
    .recordsTable{
        display: table;
        width: 100%;
        font-size: 50%;
    }
    .recordsRow{
        display: table-row;
    }
    .recordsMainRow{
        background-color: var(--rowMainBackColor);
        color: var(--rowMainFrontColor);
    }
    .recordsAltRow{
        background-color: var(--rowAltBackColor);
        color: var(--rowAltFrontColor);
    }
    .recordsRow{
        display: table-row;
    }
    .recordsCell{
        display: table-cell;
        vertical-align: middle;
        padding: 5px;
    }
        .recordsCellTypeZelle{
            background-image: url("../img/logoZelle.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
        .recordsCellTypePaypal{
            background-image: url("../img/logoPaypal.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
        .recordsCellSt{
            text-align: center;
            width: 5%;
        }
        .recordsCellType{
            text-align: center;
            width: 15%;
        }
        .recordsCellTime{
            text-align: center;
            font-size:65%;
            width: 20%;
        }
        .recordsCellName{
            text-align: left;
        }
        .recordsCellAmt{
            text-align: right;
            width: 25%;
        }
.footerCW{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-size: 30%;
    color: var(--mainFrontColor);
}