*{
    padding: 0;
    margin: 0;
    line-height: 1.5;
}

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

:root {
    --main-bg : #d0a578;
    --header-text-active : #754620;
    --text-white: #fff;
    --menu-text: #63412f;
    --main-container-bg : #f2e8de;
    --table-header: #3bd0d8;
    --active-menu: #f6d9bd;
}
.header_text {
    color: var(--header-text-active)
}
.header {
    background: var(--main-bg);
    padding: 10px;
}
input#remark,select#bank_num,input#flag,select#bank_select,input#accounting_date,input#transfer_time,input#bank_fee,input#income,input#outcome,select#usage_select {
    background: transparent;
    border: 0;
}
.active_text {
    color: var(--header-text-active)
}
select, input, option, input::placeholder{
    font-size:.8rem!important;
}

.text_white {
    color: var(--text-white);
}
td, tr, th {
    border: 1px solid #6b72805e;
}
.menu_text {
    color: var(--menu-text);
}

h3 {
    font-style: italic;
    color: gray;
}

.submit_btn {
    background: var(--menu-text);
}
.main_container { 
    background: var(--main-container-bg);
}
tbody {
    background: transparent;
}

.table_header {
    color: var(--table-header);
    background: #ffffffa1;
}
.active_bg {
    background: var(--active-menu);
    font-weight: 600;
    border-top-left-radius: 10px;
}
.fadeIn {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: .182s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}
.bg_custom {
    background: linear-gradient(45deg, #ffe2c4b0, #cf93556b);
}
.bg_out {
    background: linear-gradient(45deg, #FF5370, #ff869a);
}