@charset "utf-8";
body {
    margin:0;
    padding:0;
    width: 100%;
    height: 100%;
    background: #2d2d2d;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: Century Gothic, Arial, Helvetica, sans-serif;
}
html {
    padding:0;
    margin:0;
    font-family: Century Gothic, Arial, Helvetica, sans-serif;
}
/* main */
.page {
    overflow-y: auto;
    padding:0;
    margin:0 auto;
    margin-top: 40px;
    background: url("/styling/mainbackground.jpg");
    background-size: cover;
    font-family: Century Gothic, Arial, Helvetica, sans-serif;
}

/************** LOGIN STYLING **********************/
#login_form-container {
    background: rgba(0, 0, 0, 0.7);
    width: 350px;
    margin: 0 auto;
    padding: 30px;
}

#login_form-container table {
    width: 100%
}

#login-header {
    font-size: 30px;
    color: white;
    text-align: center;
    padding-bottom: 20px;
}

.login_field {
    background-color: white;
    height: 50px;
    padding-left: 15px;
}

.login_field input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

.login_field input {
    background-color: white !important;
    border: none;
    width: 70%;
}

.login_submit {
    background: transparent;
    border: 2px solid #24b3f7;
    cursor: pointer;
    height: 35px;
    width: 100%;
    color: white;
    margin-top: 5px;
    border-radius: 0px;
}

.login_submit:hover {
    background: #24b3f7;
    cursor: pointer;
}

#login-name {
    padding-left: 42px;
}
#login-username {
    padding-left: 5px;
}
#login-key {
    padding-left: 60px;
}
#login-create {
    color: white;
    text-align: center;
}

/**************************************************/
/******************* MAIN PAGE ********************/
.main {
    width: 80%;
    padding: 0px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgb(212, 235, 249);
        box-shadow: 5px 0 20px 10px rgb(212, 235, 249);
}

#header-bar {
    padding: 0px;
    padding-left: 15px;
    margin: 0 auto;
    background: white;
    box-shadow: 0 10px 20px -5px rgb(212, 235, 249);
}

.logged-in-bar {
    text-align: right;
}

#logout_form-container {
    display: inline-block;
    margin: 10px;
}

#logout_form-container input, #add_button, #update_button {
    background: #24b3f7;
    border: 2px solid #24b3f7;
    cursor: pointer;
    height: 35px;
    color: white;
    border-radius: 0px;
}

#logout_form-container input:hover, #add_button:hover, #update_button:hover {
    background: transparent;
    border: 2px solid #24b3f7;
    color: black;
    cursor: pointer;
}

.get-finance_table, #total-summary_table {
    border-spacing: 0px;
    border-collapse: collapse;
    min-width: 550px;
}

.get-finance_table th, #total-summary_table th {
    padding-right: 10px;
    background-color:#078dcd;
    font-weight:normal;
    color: white;
}

.get-finance_table tr:hover {
    background-color:#8ed8fb;
}

.left-column {
    display: inline-block;
}

.left-column div h3, #right-column div h3 {
    margin: 0 auto;
    text-align: center;
    font-size: 22px;
    font-weight: normal;
}
#get-debt_table-container, #get-income_table-container, #get-savings_table-container {
    display: inline-block;
}

#right-column {
    float: right;
}

#allowances table, #upcoming-bills table, #next-allowance table, #projected-savings table, #remaining-expenses table {
    border-collapse: collapse;
    border-spacing: 0px;
    width: 100%;
}

#allowances table tr, #next-allowance table tr {
    background-color: #078dcd;
    color: white;
}

#allowances table td, #next-allowance table td {
    text-align: center;
    border-bottom: 1px solid white;
}

.allowance-log {
    visibility: hidden;
    display: none;
    color: black;
    background: white;
    text-align: left !important;
    font-size: 14px;
}

/****** BUTTON STYLING *******/
.white_button {
    color: black;
    background-color: white;
    padding: 10px;
    vertical-align: middle;
    cursor: pointer;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    border: 1px solid black;
    border-radius: 0px !important;
}

.white_button:hover {
    color: white;
    background-color: transparent;
    cursor: pointer;
    border: 1px solid white;
    border-radius: 0px !important;
}

.pencilIcon {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    background-image: url(/styling/pencil-edit-button.png);
    background-size: 100% 100%;
    width: 25px;
    height: 25px;
    margin: 0 !important;
}

.trashcanIcon {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    background-image: url(/styling/waste-bin.png);
    background-size: 100% 100%;
    width: 25px;
    height: 25px;
    margin: 0 !important;
}

.hidden-log {
    cursor: pointer;
    display: inline-block;
    float: right;
    vertical-align: middle;
    background-image: url(/styling/drop-down-arrow.png);
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
}

.visible-log {
    cursor: pointer;
    display: inline-block;
    float: right;
    vertical-align: middle;
    background-image: url(/styling/drop-up-arrow.png);
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
}

/*****************************/
/****** POPUP STYLING ********/
#add_button-container {
    float: left;
    margin: 10px;
}

#add_button {
    width: 60px;
}

#add_forms, #edit_form-container, #update-user_container {
    display:none;
    visibility: hidden;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 450px;
    height: 320px;
    padding: 10px 30px;
    background: #2d2d2d;
}

#add-header-section, #edit-header-section {
    height: 20px;
    padding: 20px;
    color: white;
    border-bottom: 1px solid white;
}

#add-header, #edit-header {
    font-weight: normal;
    margin: 0 auto;
    float: left;
}

#add-navigation {
    float: right;
}

#add-income_form-container, #add-debt_form-container, #add-savings_form-container {
    display:none;
    visibility: hidden;
}

.add-finance_form, #edit-finance_form, #update-user_form {
    padding: 10px;
}

.add-finance_form table, #edit-finance_form table, #update-user_form table {
    width: 100%;
}

.add-finance_form table th, #edit-finance_form table th, #update-user_form table th {
    text-align: right;
    font-weight: normal;
    color: white;
}

.add-finance_form input, .add-finance_form select, #edit-finance_form input, #edit-finance_form select, #update-user_form input {
    background: white;
    border: none;
    width: 100%;
    line-height: 30px;
    height: 30px;
}

#update-user_form input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

.add-finance_form input[type="submit"], #edit-finance_form input[type="submit"], #cancel_button, #update-user_form input[type="submit"] {
    cursor: pointer;
    height: 35px;
    border-radius: 0px;
}

.add-finance_form input[type="submit"]:hover, #edit-finance_form input[type="submit"]:hover, #cancel_button:hover, #update-user_form input[type="submit"]:hover {
    cursor: pointer;
    height: 35px;
    border-radius: 0px;
}

.add-finance_form input[type="submit"], #edit-finance_form input[type="submit"], #update-user_form input[type="submit"] {
    background: transparent;
    border: 2px solid #24b3f7;
    color: white;
    margin-top: 15px;
}

.add-finance_form input[type="submit"]:hover, #edit-finance_form input[type="submit"]:hover, #update-user_form input[type="submit"] {
    background: #24b3f7;
    border: 2px solid #24b3f7;
    color: white;
}

#cancel_button {
    background: #2d2d2d;
    border: 2px solid #ffffff;
    color: white;
    width: 100%;
}

#cancel_button:hover {
    background: #ffffff;
    border: 2px solid #ffffff;
    color: black;
}