@charset "UTF-8";
/* CSS Document */
:root{
    --themecolor: #CA0000;
    --themehover: #DC0000;
	--font: 'Noto Sans TC', sans-serif;
    --fontcolor: #2D2D2D;
	--bgcolor: #F5F6F8;
	--bordercolor: #D9DCE4;
	--rowcolor: #f2f2f5;
	--rowcolorhover: #e4e4ea;
	--borderradiusin: 0.3em;
	--borderradius: 0.4em;
	
	--yellow1:#fec62b;
	--yellow2:#F99B12;
	--pink1:#FD60C3;
	--pink2:#E30082;
	--purple1:#A24EDA;
	--purple2:#7745D4;
	--blue1:#2484EF;
	--blue2:#0070CE;
	--green1:#00B769;
	--green2:#009D56;
	--red: #951A1C;
	--negative: #CD1A1C;
	
}
html{
	width: 100%;
	height: 100%;
}
body{
	font-family: var(--font);
	font-weight: 400;
	font-size: 0.8em;
    background: var(--bgcolor);
	color: var(--fontcolor);
	margin: 0;
	padding: 0;
	line-height: 1.6;
  	-ms-text-size-adjust: 100%;
  	-webkit-text-size-adjust: 100%;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
  	text-rendering: optimizeLegibility;
    letter-spacing: 0.03em;
	height: 100%;
}
a{
    text-decoration: none;
}
a:hover{
	color: #555;
}
h1{
	font-family: var(--font);
	color: var(--fontcolor);
	padding: 0;
	margin: 1em 0 0.4em 0.3em;
	font-size: 1.8em;
}
div{
	box-sizing: border-box;
}
input,
select,
textarea{
	width: 100%;
    font-size: 1.1em;
    font-family: var(--font);
	color: var(--fontcolor);
	outline: none;
	-moz-appearance: none;
    -webkit-appearance: none;
	border: 1px solid;
	border-color: #ddd;
	padding: 0.8em 0.7em;
	box-sizing: border-box;
	border-radius: var(--borderradiusin);
	transition: border-color 0.2s;
}
input:focus,
select:focus,
textarea:focus{
	border-color: #aaa;
}
select{
    background-image: url('data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 14 9" style="enable-background:new 0 0 14 9;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:%23666666;%7D%0A%3C/style%3E%3Cpolygon class="st0" points="7,8 1,1 13,1 "/%3E%3C/svg%3E');
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
    cursor: pointer;
	padding: 0.75em 0.7em;
}
/* Change autofill color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}
/* change placeholder color */
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #ccc;
	opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #ccc;
}
::-ms-input-placeholder { /* Microsoft Edge */
	color: #ccc;
}
button{
    min-width: 115px;
	-moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    padding: 0.6em 1.2em;
    background: var(--themecolor);
    border-radius: var(--borderradiusin);
    color: #fff;
    font-weight: bold;
    font-size: 1.05em;
    cursor: pointer;
    letter-spacing: 0.04em;
}
button:hover,
button.submitting{
	background: var(--themehover);
}

#loader-container{
	width:100%;
	height:100%;
	position:fixed;
	display: none;
    align-items: center;
    justify-content: center;
	background:rgba(0,0,0,0.60);
	z-index:2001;
}
#loader-content{
	width: 95%;
	max-width: 600px;
	min-height: 400px;
	max-height: 70vh;
	position: relative;
	background: #fff;
	box-shadow: 0px 0 6px 3px rgba(0,0,0,0.2);
	border-radius: var(--borderradius);
	overflow-y: auto;
}
/* scroll bar */
#loader-content::-webkit-scrollbar {
    width: 6px;
}
#loader-content::-webkit-scrollbar-track {
    background: none;
}
#loader-content::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 10px;
}
#loader-content::-webkit-scrollbar-thumb:hover {
    background: #777;
}
#loader-title{
	height: auto;
	padding: 1.2em 0 0.8em 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: var(--bordercolor) 1px solid;
}
#loader-title h1{
	padding: 0em;
	margin: 0;
	font-size: 1.7em;
}
#loader{
	padding: 2em 3em;
}
#loader-close{
	font-size: 2em;
	position: absolute;
	right: 0.5em;
	top: 0.15em;
	cursor: pointer;
	transition: color 0.1s;
	color: #666
}
#loader-close:hover{
	color: var(--fontcolor);
}

.form-group{
	margin-bottom: 0.8em;
}
.form-group textarea{
	margin-bottom: -6px;
}
.form-group span{
	min-height: 6px;
	color: #951A1C;
	display: block;
	margin-left: 0.6em;
	font-size: 1.05em;
}
.form-group label{
	font-weight: bold;
	display: block;
	margin-bottom: 0.2em;
	margin-left: 0.3em;
	font-size: 1.1em;
}
.form-group-btn{
	text-align: center;
	margin-top: 1.5em;
}
.form-group .split{
	display: flex;
}
.form-group .split>div:nth-child(1){
	width: auto;
}
.form-group .split>div:nth-child(2){
	width: calc(100% - 70px);
	margin-left: 70px;
}
.form-group .ex_split{
	display: flex;
}
.form-group .ex_split>div:nth-child(1){
	width: 50%;
}
.form-group .ex_split>div:nth-child(2){
	width: calc(50% - 1em);
	margin-left: 1em;
}
.chkbox-container {
  display: block;
  position: relative;
  padding-left: 0px;
  margin-top: 8px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.chkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.chkbox-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.chkbox-container:hover input ~ .chkbox-checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.chkbox-container input:checked ~ .chkbox-checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.chkbox-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.chkbox-container input:checked ~ .chkbox-checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.chkbox-container .chkbox-checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.update-container{
	min-height: 230px;
}
.container{
    width: auto;
    margin: 0 1em;
}
.main-margin{
	margin: 0.5em;
}

.loader {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-block;
  border-top: 2px solid #d80000;
  border-right: 2px solid transparent;
  box-sizing: border-box;
  animation: rotation 0.6s linear infinite;
  margin-top: 5px;
  position: absolute;
  left: 5px;
  top: 3px
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 
.edit i{
	color: #078B00;
	position: absolute;
	left: 6px;
	top: 11px
}


/*------------ Global ends -----------------*/

/*------------ Sign in -----------------*/
.sign-container{
	width: 100vw;
	height: 95vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.sign-container>div{
	width: 95%;
	margin: auto;
	max-width: 400px;
}
.sign-container img{
	height: 42px;
	display: block;
	margin: auto;
	margin-bottom: 1.3em;
	border: 0;
}
.sign-content{
	background: #fff;
	padding: 2em 2.8em;
	border-radius: var(--borderradius);
	border: var(--bordercolor) 1px solid;
	
}
.sign-content .form-group{
    border: 1px solid;
	border-color: #ccc;
    border-radius: var(--borderradiusin);
	display: flex;
    align-items: center;
    margin-top: 1em;
}
.sign-content input{
	border: none;
}
.form-group img{
    height: 25px;
    display: block;
	margin: 0;
    margin-left: 10px;
	margin-top: 1px;
}
#signin-msg{
	margin: 0.2em 1em 0.3em 1em;
	text-align: center
}
.login-msg-err{
	color: #951A1C;
}
.login-msg{
	color: #009D56;
}
p.help-block{
    margin: 0;
	display: block;
    margin-left: 10px;
    color: var(--red);
}

/*------------ header -----------------*/
header{
    height: 55px;
    width: 100vw;
    position: fixed;
    z-index: 1000;
    background:rgba(255,255,255,1);
	border-bottom: 1px solid;
	border-color: var(--bordercolor);
    /*box-shadow: 0px 0 6px 0px rgba(0,0,0,0.2);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);*/
}
#header-block{
    padding-top: 55px;
}
.header-container{
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.header-1{
    width: auto;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-1 img{
    height: 34px;
    display: block;
	margin-bottom: 2px
}
.burger{
    width: 38px;
    height: 38px;
    background: url("img/header-burger.svg") no-repeat center center;
    background-size: 32px;
    border-radius: 100px;
    margin-right: 1.6em;
    transition: background-color 0.2s;
    cursor: pointer;
}
.burger:hover{
    background: url("img/header-burger.svg") no-repeat center center #ececec;
    background-size: 32px;
}
.burger:active{
    background: url("img/header-burger.svg") no-repeat center center #ccc;
    background-size: 32px;
}
.header-2{
}
.header-3{
    width: auto;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: right;
}
.header-3 a{
    color: var(--fontcolor);
    font-weight: bold;
    text-decoration: none;
}
.header-3 div div{
    min-width: 38px;
    height: 38px;
    padding: 0 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    transition: background-color 0.2s;
    box-sizing: border-box;
}
.header-3 div div:hover{
    background: #ececec;
}
.header-3 div div:active{
    background: #ccc;
}
.header-3 div div.header-user{
    margin-right: 0.5em;
    background: url("img/user-ico.svg") no-repeat;
    background-size: 24px;
    background-position: 10px 7px;
    padding-left: 40px;
    transition: background-color 0.2s;
    line-height: 1;
}
.header-3 div div.header-notification{
	width: 30px;
	height: 38px;
	padding: 0;
    margin-right: 0.5em;
    background-size: 24px;
    background-position: 7px 7px;
    transition: background-color 0.2s;
    line-height: 1;
	position: relative;
	cursor: pointer;
}
.header-3 div div.header-notification img{
	width: 24px;
	display: block;
	border: 0;
}
.bellshake{
    animation: bellshake 2000ms cubic-bezier(.36,.07,.19,.97) both infinite;
    backface-visibility: hidden;
    transform-origin: top;
}

@keyframes bellshake {
  0% { transform: rotate(0); }
  8% { transform: rotate(7deg); }
  13% { transform: rotate(-7deg); }
  18% { transform: rotate(6deg); }
  23% { transform: rotate(-6deg); }
  28% { transform: rotate(3deg); }
  33% { transform: rotate(-3deg); }
  38% { transform: rotate(1deg); }
  43% { transform: rotate(0); }
}
.header-3 div.notification-badge,
.header-3 div.notification-badge:hover{
    min-width: 17px;
    height: 17px;
    padding: 0em;
	line-height: 1;
	text-align: center;
    display: inherit;
    border-radius: 100px;
	color: #fff;
	font-size: 0.8em;
	font-weight: bold;
	letter-spacing: -0.03em;
    transition: background-color 0.2s;
	position: absolute;
	top: 0;
	left: -5px;
    background-color: #C50000;
}
.header-3 div div.header-user:hover,
.header-3 div div.header-notification:hover{
    background-color: #eaeaea;
}
.header-3 div div.header-user:active,
.header-3 div div.header-notification:active{
    background-color: #ccc;
}
.header-3 div div.user-active{
    background-color: #ececec;
}

.notification{
	position: absolute;
	right: 1em;
	top: 65px;
	width: 300px;
	background: #fff;
	border-radius: var(--borderradius);
	box-shadow: 0 0 5px 2px rgba(0,0,0,0.2);
	display: none;
}
.notification::before {
    background-color: #fff;
    box-shadow: -3px -3px 3px 0px rgba(0,0,0,0.1);
    content: "\00a0";
    display: block;
    height: 18px;
    left: 122px;
    position: relative;
    top: -9px;
    transform:             rotate( 45deg );
        -moz-transform:    rotate( 45deg );
        -ms-transform:     rotate( 45deg );
        -o-transform:      rotate( 45deg );
        -webkit-transform: rotate( 45deg );
    width:  18px;
}
.notification>div{
	min-height: 30vh;
	max-height: calc(100vh - 94px);
	padding: 0 1em;
	padding-bottom: 1em;
	overflow-y: auto;
	overflow-x: hidden;
}
/* scroll bar */
.notification>div::-webkit-scrollbar {
    width: 4px;
}
.notification>div::-webkit-scrollbar-track {
    background: none;
}
.notification>div::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 8px;
}
.notification>div::-webkit-scrollbar-thumb:hover {
    background: #777;
}
.notification h3{
	padding: 0 0 0em 0.3em;
	margin: 0em 0 0em 0;
	font-size: 1.4em;
}

.noti-container div.notes{
	position: relative;
	border-bottom: var(--bordercolor) 1px solid;
	padding: 0.3em 0.5em;
}
.noti-container div.notes:hover{
	background: #f5f5f5;
}
.noti-container div.new:hover{
	background: #eee;
}
.notification .noti-container>div:nth-last-child(1)>div{
	border-bottom: none;
}
.noti-container .notes>span{
	font-size: 0.85em;
	color: #888;
}
.noti-container .notes>span a{
	color: #888;
}
.noti-container .notes>span a:hover{
	color: var(--themecolor);
}
.noti-container div.subject{
	width: calc(100% - 50px);
	font-size: 1.1em;
	line-height: 1.5em;
}
.noti-container div.button{
	width: 50px;
	display: flex;
	align-items: center;
}
.noti-container button{
	position: absolute;
	font-size: 0.9em;
	padding: 0.4em 0.8em;
	min-width: auto;
	right: 0.6em;
	top: calc(50% - 1.1em);
}
.noti-container div.new{
	background: #f5f5f5;
	transition: background-color 0.2s, color 0.2s;
}
.noti-container i{
	color: var(--green2);
	position: absolute;
	font-size: 1.2em;
	right: 0.6em;
	top: calc(50% - 0.5em);
}

.noti-container-past{
	background: #ccc;
	margin: 0;
	padding: 0
}
.noti-container-past>div>div{
	position: relative;
	border-bottom: var(--bordercolor) 1px solid;
	padding: 0.3em 0.5em;
}
.noti-container-past->div>div>div{
	width: calc(100% - 0px);
	font-size: 1.1em;
	line-height: 1.5em;
	background: #aaa;
}
.noti-container-past button{
	position: absolute;
	font-size: 0.9em;
	padding: 0.4em 0.8em;
	min-width: auto;
	right: 0.6em;
	bottom: 0.6em;
}


.no-notify,
.no-notify:hover{
	text-align: center;
	line-height: 1.5em;
	margin: 0.4em 0 1.1em 0;
	padding: 0;
	color: #888
}
.notification .crossline{
    margin: 0em 0 0em 0;
	text-align: center;
}
.notification .crossline>div{
	border-bottom: none;
	margin: 0;
	padding: 0.5em 0;
}
.notification .crossline>div:hover{
	background: none;
}
.crossline div{
    width: 100%;
    position: relative;
    z-index: 1;
}
.crossline div:before {
    border-top: 1px solid #999;
    content:"";
    margin: 0 auto;
    position: absolute;
    top: 50%; left: 0; right: 0; bottom: 0;
    width: 100%;
    z-index: -1;
}
.crossline>div span{
    background: #fff;
    padding: 0 0.8em;
	margin: 0;
	font-weight: bold;
	font-size: 0.95em;
	color: var(--fontcolor);
}
/*----- date picker ----- */
#date-picker-container{
    display: flex;
    align-items: center;
}
#date-picker-container a{
    text-decoration: none;
}
input#flatpickr{
    max-width: 190px;
    height: 34px;
    text-align: center;
    font-size: 1.4em;
    font-weight: bold;
    color: #005FC6;
    letter-spacing: 0.01em;
    border-radius: 60px;
    border: none;
    transition: 0.2s;
}
input#flatpickr:hover{
    background: #ececec;
}
.prev-date{
    height: 38px;
    width: 38px;
    font-size: 1.5em;
    background: #fff;
    color: #888;
    font-weight: bold;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5em;
    transition: 0.2s;
    line-height: 1;
}
.next-date{
    height: 38px;
    width: 38px;
    font-size: 1.5em;
    background: #fff;
    color: #888;
    font-weight: bold;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5em;
    transition: 0.2s;
    line-height: 1;
}
.prev-date:hover,
.next-date:hover{
    background: #eaeaea;
    color: var(--fontcolor);
}
.prev-date:active,
.next-date:active{
    background: #ddd;
}
/*----------- navigation -------- */
nav{
    width: auto;
    position: fixed;
    left: 0;
    height: calc(100vh - 55px);
    background: #fff;
    box-sizing: border-box;
    z-index: 900;
    font-weight: bold;
    font-size: 1em;
	border-right: 1px solid;
	border-color: var(--bordercolor);
    /*box-shadow: 0 0 6px 0px rgba(0,0,0,0.2);*/
}
nav a,
nav a:hover{
    color: var(--fontcolor);
    text-decoration: none;
}
nav hr{
    width: calc(100% - 20px);
    margin: 8px 10px;
    height: 1px;
    border: none;
    background: var(--bordercolor);
}
nav>div{
    height: calc(100vh - 55px - 0em);
    padding-bottom: 2em;
    padding-top: 1em;
    box-sizing: border-box;
    overflow: hidden;
}
/* scroll bar */
nav>div::-webkit-scrollbar {
    width: 4px;
}
nav>div::-webkit-scrollbar-track {
    background: none;
}
nav>div::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 8px;
}
nav>div::-webkit-scrollbar-thumb:hover {
    background: #777;
}
nav>div:hover{
    overflow-y: auto;
	overflow-x: hidden;
}
.nav-description{
    width: 138px;
    margin-left: 62px;
    display: none;
    box-sizing: border-box;
    height: 44px;
    transition: 0.2s;
}
.nav-description-active{
    display: flex;
    align-items: center;
    transition: 0.2s;
}
.nav-icon{
    height: 42px;
    width: 45px;
    border-radius: 0.5em;
    cursor: pointer;
    transition: background-color 0.2s, width 0.2s;
    margin: 2px 10px 0 10px;
    box-sizing: border-box;
}
.nav-icon-active{
    width: 200px;
}
.nav-icon:hover{
    background-color: #F2F2F5
}
.nav-icon:active{
    background-color: #EFEFF3
}

.nav-bank{
    background: url("img/nav/nav-bank.svg") 9px 8px no-repeat;
    background-size: 26px;
}
.nav-loan{
    background: url("img/nav/nav-loan.svg") 9px 8px no-repeat;
    background-size: 26px;
}
.nav-bet{
    background: url("img/nav/nav-bet.svg") 9px 8px no-repeat;
    background-size: 26px;
}
.nav-currency{
    background: url("img/nav/nav-currency.svg") 9px 8px no-repeat;
    background-size: 26px;
}
.nav-baddebt{
    background: url("img/nav/nav-baddebt.svg") 9px 8px no-repeat;
    background-size: 26px;
}
.nav-personal{
    background: url("img/nav/nav-personal.svg") 9px 8px no-repeat;
    background-size: 26px;
}
.nav-expenses{
    background: url("img/nav/nav-expenses.svg") 9px 8px no-repeat;
    background-size: 26px;
}
.nav-loan-summary{
    background: url("img/nav/nav-loan-summary.svg") 9px 8px no-repeat;
    background-size: 26px;
}
.nav-bet-summary{
    background: url("img/nav/nav-bet-summary.svg") 9px 8px no-repeat;
    background-size: 26px;
}
.nav-currency-summary{
    background: url("img/nav/nav-currency-summary.svg") 9px 8px no-repeat;
    background-size: 26px;
}
.nav-daily-report{
    background: url("img/nav/nav-daily-report.svg") 9px 8px no-repeat;
    background-size: 26px;
}
.nav-loan-full{
    background: url("img/nav/nav-loan-full.svg") 9px 8px no-repeat;
    background-size: 26px;
}
.nav-bet-full{
    background: url("img/nav/nav-bet-full.svg") 9px 8px no-repeat;
    background-size: 26px;
}
.nav-currency-full{
    background: url("img/nav/nav-currency-full.svg") 9px 8px no-repeat;
    background-size: 26px;
}
.nav-personal-full{
    background: url("img/nav/nav-personal-full.svg") 9px 8px no-repeat;
    background-size: 26px;
}
.nav-expenses-full{
    background: url("img/nav/nav-expenses-full.svg") 9px 8px no-repeat;
    background-size: 26px;
}
.nav-invest-full{
    background: url("img/nav/nav-invest.svg") 9px 8px no-repeat;
    background-size: 26px;
}
.nav-payslip{
    background: url("img/nav/nav-payslip.svg") 9px 8px no-repeat;
    background-size: 26px;
}
.nav-attendance{
    background: url("img/nav/nav-attendance.svg") 9px 8px no-repeat;
    background-size: 26px;
}
.nav-active{
    background-color: #EFEFF3;
}
.tooltip {
	display:none;
	position:absolute;
	max-width:400px;
	background-color:rgba(20, 20, 20, 0.8);
	border-radius:5px;
	padding:5px 10px;
	color:#fefefe;
    z-index: 1001;
}
/*----------- main -----------*/
main{
    width: calc(100% - 1em);
    padding-left: 66px;
    font-size: 1em;
    letter-spacing: 0.02em;
    transition: padding 0.2s;
	box-sizing: border-box;
}
.nav-open{
    padding-left: 220px;
}
/*----------- users -----------*/
.users-container{
	max-width: 550px;
	margin: auto;
}
.users-content{
	padding: 2em 3em;
	border: var(--bordercolor) 1px solid;
	border-radius: var(--borderradius);
	background: #fff;
}
/*---------- bank ------------*/
.bank-container{
    width: calc(42% - 1em - 0.75em);
	padding-bottom: 1em;
}
.bank-note-container{
    width: calc(58% - 2em + 2px);
    height: calc(100vh - 55px);
    position: fixed;
    right: 0;
    top: 55px;
    padding: 0em;
    z-index: 999;
    overflow-y:hidden;
    transition: width 0.2s;
	padding-right: 6px;
	padding-bottom: 1em;
}
.bank-note-container-active{
    width: calc(58% - -2em - 138px);
}
.bank-note-container:hover{
    overflow-y: auto;
	padding-right: 0px;
}
/* scroll bar */
.bank-note-container::-webkit-scrollbar {
    width: 6px;
}
.bank-note-container::-webkit-scrollbar-track {
    background: none;
}
.bank-note-container::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 10px;
}
.bank-note-container::-webkit-scrollbar-thumb:hover {
    background: #777;
}
.bank-content{
	border-radius: var(--borderradius);
	border: var(--bordercolor) 1px solid;
	background: #fff;
	padding: 0.5em;
	padding-bottom: 1em;
}
.bank-note-content{
	background: #fff;
	border: var(--bordercolor) 1px solid;
	border-radius: var(--borderradius);
	padding: 0.5em;
	padding-bottom: 1em;
	min-height: 40vh;
}
/*---------- tag & columns -------------*/
.tag-content{
	display: flex;
	font-weight: bold;
	border-bottom: #888 1px solid;
	justify-content: space-between;
}
.tag-content>div{
	padding: 0.4em 0.4em 0.5em 0.4em;
}
.row-content{
	display: flex;
}
.row-content>div{
	padding: 0.5em 0.4em;
	border-bottom: var(--bordercolor) 1px solid;
	border-right: var(--bordercolor) 1px solid;
}
.row-content>div:nth-last-child(1){
	border-right: none;
}
.total-content{
	border-radius: var(--borderradius);
	background: #e6e6e6;
	margin-top: 1px;
}
.total-content>div{
	font-weight: bold;
	border-bottom: none;
	border-right: #fff 1px solid;
}
.new-content{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5em 0.4em 0.5em 0.4em;
	color: #aaa;
	transition: background-color 0.15s, color 0.15s;
	cursor: pointer
}
.new-content:hover{
	background: var(--rowcolor);
	color: var(--fontcolor)
}
.new-content img{
	height: 16px;
	margin-right: 0.5em
}
.edit{
	position: relative;
	cursor: pointer;
	transition: background-color 0.15s;
}
.edit:hover{
	cursor: pointer;
	background: var(--rowcolor);
}
.edit input{
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	display: none;
	padding: 0.45em 0.3em;
	border-radius: 0;
	text-align: right;
}
.modify{
	position: relative;
	transition: background-color 0.15s;
}
.negative{
	color: var(--negative);
}
.no-record{
	text-align: center;
	border-bottom: var(--bordercolor) 1px solid;
	padding: 3em 0;
}
/*---------- tag & columns -------------*/
.bank-container .tag1{
	width: 20%;
}
.bank-container .tag2{
	width: 19%;
	text-align: right;
}
.bank-container .tag3{
	width: 19%;
	text-align: right;
}
.bank-container .tag4{
	width: 21%;
	text-align: right;
}
.bank-container .tag5{
	width: 21%;
	text-align: right;
	font-weight: bold;
}
.bank-content .row-content .tag2 span::before,
.bank-content .row-content .tag3 span::before,
.bank-content .row-content .tag4 span::before,
.bank-content .row-content .tag5 span::before{
	content: 'RM ';
	font-size: 0.7em;
}
.bank-mod{
	position: absolute;
	width: calc(100% - 4px);
	display: none;
	justify-content: space-between;
	top: 3px;
	left: 1px;
	cursor: pointer;
}
.bank-mod div{
	width: 49%;
	border-radius: 0.4em;
	background-color: #e6e6e6;
	padding: 0.3em;
	text-align: center;
	transition: background-color 0.15s;
}
.bank-mod div:hover{
	background-color: #d8d8d8;
}
.greyout-number{
	color: #ccc
}

.cash>div{
	width: 100%;
	background: none;
	font-weight: bold;
}
.bank-grandtotal{
	background: var(--yellow1);
}
.bank-grandtotal .grand-total{
	margin-bottom: 0em;
	border: none;
}
/*------------- bank note --------------*/
.note-content{
	display: flex;
	justify-content: space-between;
}
.bank-note-container .tag1,
.bank-note-content .note-content .tag1{
	width: calc(33.333% - 0.3em);
}
.bank-note-container .tag2,
.bank-note-content .note-content .tag2{
	width: calc(33.333% - 0.3em);
}
.bank-note-container .tag3,
.bank-note-content .note-content .tag3{
	width: calc(33.333% - 0.3em);
}
.note-content .tag1 textarea{
	width: calc(100% - 0em);
	padding: 0.5em 0.5em;
	margin-top: 0;
	line-height: 1.4em;
	border-radius: 0;
	resize: none;
	cursor: pointer;
	overflow: hidden;
	margin-bottom: -6px;
    border-top:none;
    border-right: none;
	border-left: none;
	font-size: 1em;
	transition: background-color 0.2s;
}
.note-content .tag1 textarea:hover{
	background: var(--rowcolor);
}
.note-content .tag1 textarea:focus{
	cursor: inherit;
	background: var(--rowcolor);
	border-color: var(--bordercolor); 
}

.note-content .new-content{
	width: calc(100% - 0em);
}
.note-done{
	color: var(--green2);
}

/*------------- bank note 2 & 3 --------------*/
#bank-note-category-container{
    width: calc(100% - 0em);
    margin: auto;
    position: relative;
	margin-top: 0.4em;
}
.note-content .tag2>div:nth-child(1) div#bank-note-category-container,
.note-content .tag3>div:nth-child(1) div#bank-note-category-container{
	margin-top: 0em;
}
.bank-note-category{
    padding: 3px 0px;
    color: #fcfcfc;
    text-transform: capitalize;
    text-align: center;
    font-weight: 700;
    border-top-right-radius: 0.6em;
	transition: 0.15s;
	cursor: pointer;
}
.bank-note-category:hover{
    color: #ddd;
}
.bank-note-category-btn{
    width: 24px;
    height: 24px;
    padding: 0 2px;
    position: absolute;
    right: 3px;
    top: 2px;
    color: #fcfcfc;
    cursor: pointer;
    transition: 0.15s;
    font-weight: 700;
	font-size: 1.1em;
    text-align: center;
}
.bank-note-category-btn:hover{
    color: #222;
}
.note-category-color-blue1{
	background: var(--blue1);
}
.note-category-color-blue2{
	background: var(--blue2);
}
.note-category-color-yellow1{
	background: var(--yellow1);
}
.note-category-color-yellow2{
	background: var(--yellow2);
}
.note-category-color-purple1{
	background: var(--purple1);
}
.note-category-color-purple2{
	background: var(--purple2);
}
.note-category-color-pink1{
	background: var(--pink1);
}
.note-category-color-pink2{
	background: var(--pink2);
}
.note-category-color-green1{
	background: var(--green1);
}
.note-category-color-green2{
	background: var(--green2);
}
.note2-no-update{
	text-align: center;
	margin-top: 1em
}
.note2-no-update button{
	padding: 0.5em 1.5em;
	font-size: 0.95em;
	margin-top: 0.6em;
	min-width: auto;
}

/* style for radio button */
.radio-container{
	margin-top: 0.8em;
	display: flex;
	justify-content: space-between;
}
.radio-container>div{
	width: fit-content;
}
label.container {
  width: 36px;
  position: relative;
  margin-bottom: 0px;
  cursor: pointer;
  font-size: 1em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
label.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  border: #999 1px solid;
}

.c-nocolor,
.container input:checked ~ .c-nocolor{
    background: #f4f4f4;
}
.container:hover input ~ .c-nocolor{
    background: #444;
}
.c-yellow1,
.container input:checked ~ .c-yellow1{
    background: var(--yellow1);
}
.c-yellow2,
.container input:checked ~ .c-yellow2{
    background: var(--yellow2);
}
.c-pink1,
.container input:checked ~ .c-pink1{
    background: var(--pink1);
}
.c-pink2,
.container input:checked ~ .c-pink2{
    background: var(--pink2);
}
.c-purple1,
.container input:checked ~ .c-purple1{
    background: var(--purple1);
}
.c-purple2,
.container input:checked ~ .c-purple2{
    background: var(--purple2);
}
.c-blue1,
.container input:checked ~ .c-blue1{
    background: var(--blue1);
}
.c-blue2,
.container input:checked ~ .c-blue2{
    background: var(--blue2);
}
.c-green1,
.container input:checked ~ .c-green1{
    background: var(--green1);
}
.c-green2,
.container input:checked ~ .c-green2{
    background: var(--green2);
}
.container:hover input ~ .c-red,
.container:hover input ~ .c-yellow,
.container:hover input ~ .c-blue,
.container:hover input ~ .c-green,
.container:hover input ~ .c-purple{
    opacity: 0.85;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
label.container input:checked ~ .checkmark:after {
  display: block;
}
label.container .checkmark:after {
 	top: 7px;
	left: 7px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: white;
}

.note-content .tag2 textarea,
.note-content .tag3 textarea{
	width: calc(100% - 0em);
	padding: 0.5em 0.5em;
	margin-top: 1px;
	line-height: 1.4em;
	border-radius: 0;
	resize: none;
	cursor: pointer;
	overflow: hidden;
	margin-bottom: -6px;
    border-top:none;
    border-right: none;
	border-left: none;
	font-size: 1em;
	transition: background-color 0.15s;
}
.note-content .tag2 textarea:hover,
.note-content .tag3 textarea:hover{
	background: var(--rowcolor);
}
.note-content .tag2 textarea:focus,
.note-content .tag3 textarea:hover{
	cursor: inherit;
	background: var(--rowcolor);
	border-color: var(--bordercolor); 
}

.note-content .tag2 textarea:nth-child(1),
.note-content .tag3 textarea:nth-child(1){
	margin-top: 0px;
}

.note-content .tag2 textarea.note-border-yellow1,
.note-content .tag3 textarea.note-border-yellow1{
	border-left: var(--yellow1) 2px solid;
}
.note-content .tag2 textarea.note-border-yellow2,
.note-content .tag3 textarea.note-border-yellow2{
	border-left: var(--yellow2) 2px solid;
}
.note-content .tag2 textarea.note-border-pink1,
.note-content .tag3 textarea.note-border-pink1{
	border-left: var(--pink1) 2px solid;
}
.note-content .tag2 textarea.note-border-pink2,
.note-content .tag3 textarea.note-border-pink2{
	border-left: var(--pink2) 2px solid;
}
.note-content .tag2 textarea.note-border-purple1,
.note-content .tag3 textarea.note-border-purple1{
	border-left: var(--purple1) 2px solid;
}
.note-content .tag2 textarea.note-border-purple2,
.note-content .tag3 textarea.note-border-purple2{
	border-left: var(--purple2) 2px solid;
}
.note-content .tag2 textarea.note-border-blue1,
.note-content .tag3 textarea.note-border-blue1{
	border-left: var(--blue1) 2px solid;
}
.note-content .tag2 textarea.note-border-blue2,
.note-content .tag3 textarea.note-border-blue2{
	border-left: var(--blue2) 2px solid;
}
.note-content .tag2 textarea.note-border-green1,
.note-content .tag3 textarea.note-border-green1{
	border-left: var(--green1) 2px solid;
}
.note-content .tag2 textarea.note-border-green2,
.note-content .tag3 textarea.note-border-green2{
	border-left: var(--green2) 2px solid;
}

.note-content .tag1 textarea.edit-success,
.note-content .tag1 textarea.edit-succes:hover,
.note-content .tag2 textarea.edit-success,
.note-content .tag2 textarea.edit-succes:hover,
.note-content .tag3 textarea.edit-success,
.note-content .tag3 textarea.edit-succes:hover{
	background-color: #E6F5E6;
}
.note-content .tag2 textarea.marked,
.note-content .tag2 textarea.marked:hover{
	background-color: #F4D9DD;
}
/*------------- loan --------------*/
.loan-container{
	padding-bottom: 1em;
}
.loan-content{
	border-radius: var(--borderradius);
	border: var(--bordercolor) 1px solid;
	background: #fff;
	padding: 0.5em 1em;
	padding-bottom: 1em;
	min-height: calc(100vh - 140px);
}
.loan-content .tag1{
	width: 16%;
}
.loan-content .tag2{
	width: 14%;
}
.loan-content .tag-fund{
	width: 30%;
	color: #005FC6;
}
.loan-content .loan-fund{
	color: #005FC6;
	cursor: pointer;
	display: flex;
	transition: 0.15s;
}
.loan-content .loan-fund:hover{
	color: #F7A100;
}
.loan-content .tag-fund .t1{
	width: 44%;
}
.loan-content .tag-fund .t2{
	width: 56%;
}
.loan-content .tag-fund .t2::before{
	content: 'RM ';
	font-size: 0.7em;
}
.loan-content .tag-fund ul{
	list-style: none;
	padding-left: 0;
	color: var(--fontcolor);
	font-weight: normal;
	display: none;
}
.loan-content .tag-fund li{
	border-top: #ccc 1px solid;
	line-height: 1.9;
	display: flex
}
.loan-content .tag-fund li:hover{
	cursor: pointer;
	background: #F2F2F5;
}
.loan-content .tag3,
.loan-content .tag4,
.loan-content .tag5,
.loan-content .tag6,
.loan-content .tag7{
	width: 14%;
	text-align: right;
}
.loan-content .row-content{
	cursor: pointer;	
}
.loan-content .row-content:hover{
	background: var(--rowcolor);
}
.loan-content .total-content,
.loan-content .total-content:hover{
	cursor: inherit;
	background: var(--yellow1);
}
.loan-content .row-content div{
	border-right: none;
	border-left: none;
}
.loan-content .row-content>div span::before,
.loan-content .total-content>div span::before{
	content: 'RM ';
	font-size: 0.7em;
}

/*------------- bet --------------*/
.bet-container{
	padding-bottom: 1em;
}
.bet-content{
	border-radius: var(--borderradius);
	border: var(--bordercolor) 1px solid;
	background: #fff;
	padding: 0.5em 1em;
	padding-bottom: 1em;
	min-height: calc(100vh - 140px);
}
.bet-content .row-content{
	cursor: pointer;	
}
.bet-content .row-content:hover{
	background: var(--rowcolor);
}
.bet-content .total-content,
.bet-content .total-content:hover{
	cursor: inherit;
	background: var(--yellow1);
}
.bet-content .row-content div{
	border-right: none;
	border-left: none;
}
.bet-content .row-content .tag9{
	border-left: var(--bordercolor) 1px solid;
}
.bet-content .tag-content .tag9{
	border-left: #888 1px solid;
}
.bet-content .total-content .tag9{
	border-left: #fff 1px solid;
}
.bet-content .tag1{
	width: 13%;
}
.bet-content .tag2{
	width: 9%;
}
.bet-content .tag3,
.bet-content .tag4,
.bet-content .tag5,
.bet-content .tag6,
.bet-content .tag7,
.bet-content .tag8{
	width: 10.5%;
	text-align: right;
}
.bet-content .tag9{
	width: 15%;
}

.bet-content .row-content>div span::before,
.bet-content .total-content>div span::before{
	content: 'RM ';
	font-size: 0.7em;
}

/*------------- currency --------------*/
.currency-margin{
	width: calc(100% - 1em - 66px);
}
.currency-container{
	max-width: 1000px;
	margin: auto;
	padding-bottom: 1em;
}
.currency-content{
	border-radius: var(--borderradius);
	border: var(--bordercolor) 1px solid;
	background: #fff;
	padding: 0.5em 1em;
	padding-bottom: 1em;
	min-height: calc(100vh - 140px);
}
.currency-content .tag1{
	width: 25%;
}
.currency-content .tag2{
	width: 25%;
}
.currency-content .tag3,
.currency-content .tag4{
	width: 25%;
	text-align: right;
}
.currency-content .row-content div,
.currency-content .total-content div{
	border-right: none;
	border-left: none;
}
.currency-content .row-content{
	cursor: pointer;	
}
.currency-content .row-content:hover{
	background: var(--rowcolor);
}
.currency-content .total-content,
.currency-content .total-content:hover{
	cursor: inherit;
	background: var(--yellow1);
}
.currency-content .row-content>div span::before,
.currency-content .total-content>div span::before{
	content: 'RM ';
	font-size: 0.7em;
}

/*------------- personal --------------*/
.personal-margin{
	width: calc(100% - 1em - 66px);
}
.personal-container{
	max-width: 1000px;
	margin: auto;
	padding-bottom: 1em;
}
.personal-content{
	border-radius: var(--borderradius);
	border: var(--bordercolor) 1px solid;
	background: #fff;
	padding: 0.5em 1em;
	padding-bottom: 1em;
	min-height: calc(100vh - 140px);
}
.personal-content .tag1{
	width: 25%;
}
.personal-content .tag2{
	width: 25%;
}
.personal-content .tag3,
.personal-content .tag4{
	width: 25%;
	text-align: right;
}
.personal-content .row-content div,
.personal-content .total-content div{
	border-right: none;
	border-left: none;
}
.personal-content .row-content{
	cursor: pointer;	
}
.personal-content .row-content:hover{
	background: var(--rowcolor);
}
.personal-content .total-content,
.personal-content .total-content:hover{
	cursor: inherit;
	background: var(--yellow1);
}
.personal-content .row-content>div span::before,
.personal-content .total-content>div span::before{
	content: 'RM ';
	font-size: 0.7em;
}

/*------------- invest -----------------*/
.invest-margin{
	width: calc(100% - 1em - 66px);
}
.invest-container{
	margin: auto;
	padding-bottom: 1em;
}
.invest-content{
	border-radius: var(--borderradius);
	border: var(--bordercolor) 1px solid;
	background: #fff;
	padding: 0.5em 1em;
	padding-bottom: 1em;
	min-height: calc(100vh - 140px);
}
.invest-content .row-content>div{
	border: 0;
}
.invest-content .grand-total .total-content,
.invest-content .grand-total .total-content:hover{
	cursor: inherit;
	background: var(--yellow1);
}
.invest-content .row-content,
.invest-content .tag-content{
	padding: 0 0.5em;
}
.invest-content .middle-content .row-content{
	border-bottom: var(--bordercolor) 1px solid;
}
.invest-content .middle-content .row-content:nth-last-child(1){
	border-bottom: none;
}
.invest-content .new-content{
	margin-bottom: 1.5em
}
.invest-content .tag1{
	width: 12%;
}
.invest-content .tag2{
	width: 20%;
}
.invest-content .tag3{
	width: 23%;
}
.invest-content .tag4{
	width: 15%;
	text-align: right;
	font-weight: bold;
}
.invest-content .tag5{
	width: 15%;
	text-align: right;
	font-weight: bold;
}
.invest-content .tag6{
	width: 15%;
	text-align: right;
	font-weight: bold;
}
.invest-content .middle-content .row-content{
	cursor: pointer;
	transition: background-color 0.15s;
}
.invest-content .middle-content .row-content:hover{
	background-color: var(--rowcolor);
}
.invest-content .row-content .tag4{
	border-right: var(--bordercolor) 1px solid;
}
.invest-content .total-content .tag4{
	border-right: #fff 1px solid;
}
.invest-content .row-content>div span::before,
.invest-content .total-content>div span::before{
	content: 'RM ';
	font-size: 0.7em;
}
.invest-total{
	border-bottom: var(--bordercolor) 1px solid;
	
}
.invest-total .tag1{
	width: 55%;
	text-align: left;
	font-weight: bold;
}
.invest-content .grand-total .tag1{
	width: 55%;
	text-align: left;
	font-weight: bold;
}
.invest-content .grand-total{
	margin-top: 0.5em;
	border-top: none;
}
.invest-content .invest-na{
	text-align: center;
	margin: 3em 0 0 0;
	padding-bottom: 3em;
	border-bottom: var(--bordercolor) 1px solid;
}

.project-selection{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.2em 0;
	border-bottom: var(--bordercolor) 2px solid;
}
.project-selection h4{
	font-size: 1.4em;
    margin: 0 1em 0 0;
}
.project-selection select{
    margin: 0;
    padding-right: 2em;
    min-width: 300px;
    max-width: 600px;
    font-size: 1.1em;
    font-weight: 600;
}
.project-selection .selector{
    width: auto;
}
.project-edit,
.project-edit-disabled{
    width: 40px;
    height: 40px;
    background: url("img/edit-button.svg") no-repeat center center;
    background-size: 35px;
    border-radius: 100px;
    margin-left: 0.6em;
    transition: background-color 0.2s;
    cursor: pointer;
}
.project-edit:hover,
.project-edit-disabled:hover{
    background-color: #eee;
}
.project-edit-disabled{
    opacity: 0.5;
    cursor: inherit;
}

/*------------- expenses --------------*/
.exp-margin{
	width: calc(100% - 1em - 66px);
}
.exp-container{
	max-width: 1000px;
	margin: auto;
	padding-bottom: 1em;
}
.exp-content{
	border-radius: var(--borderradius);
	border: var(--bordercolor) 1px solid;
	background: #fff;
	padding: 0.5em 1em;
	padding-bottom: 1em;
	min-height: calc(100vh - 140px);
}
.exp-content .tag1,
.exp-content .tag2,
.exp-content .tag3,
.exp-content .tag4{
	width: 25%;
}
.exp-content .tag4{
	text-align: right;
}
.exp-content .row-content div,
.exp-content .total-content div{
	border-right: none;
	border-left: none;
}
.exp-content .row-content{
	cursor: pointer;	
}
.exp-content .row-content:hover{
	background: var(--rowcolor);
}
.exp-content .total-content,
.exp-content .total-content:hover{
	cursor: inherit;
	background: var(--yellow1);
}
.exp-content .row-content>div span::before,
.exp-content .total-content>div span::before{
	content: 'RM ';
	font-size: 0.7em;
}
.exp-full{
	max-width: inherit;
}

/*------------- daily-report --------------*/
.daily-container{
	padding-bottom: 1em;
}
#daily-content{
	display: flex;
	justify-content: space-between;
}
.daily-container .content-2{
	display: flex;
	justify-content: center;
}
.daily-container .content-2>div{
	width: 45%;
}
#daily-content>div{
	width: 33%;
}
#daily-content h1{
	margin-top: 0.75em;
}
.daily-content{
	border-radius: var(--borderradius);
	border: var(--bordercolor) 1px solid;
	background: #fff;
	padding: 0.5em 1em;
	padding-bottom: 1em;
}
.daily-content .tag1,
.daily-content .tag2{
	width: 50%;
	border-right: none;
	border-left: none;
}
.daily-content .tag2{
	text-align: right;
}
.daily-content .row-content>div span::before,
.daily-content .total-content>div span::before{
	content: 'RM ';
	font-size: 0.7em;
}
.daily-content .yesterday{
	font-weight: bold;
}
.daily-content .total-content{
	background: var(--yellow1);
}
.daily-content .middle-content{
	min-height: 250px;
}

/*------------- dabdebt --------------*/
.baddebt-container{
	padding-bottom: 1em;
}
#baddebt-content{
	display: flex;
	justify-content: space-between;
}
#baddebt-content>div:nth-child(1){
	width: calc(60% - 0.25em);
}
#baddebt-content>div:nth-child(2){
	width: calc(40% - 0.25em);
}
#baddebt-content h1{
	margin-top: 0.75em;
}
.baddebt-content{
	border-radius: var(--borderradius);
	border: var(--bordercolor) 1px solid;
	background: #fff;
	padding: 0.5em 1em;
	padding-bottom: 1em;
}
.baddebt-content div{
	border-right: none;
	border-left: none;
}
.baddebt-content .tag1{
	width: 30%;
}
.baddebt-content .tag2{
	width: 20%;
}
.baddebt-content .tag3,
.baddebt-content .tag4,
.baddebt-content .tag5{
	width: 25%;
}
.baddebt-content .tag3,
.baddebt-content .tag4,
.baddebt-content .tag5{
	text-align: right;
}
.hold .tag1{
	width: 47%;
}
.hold .tag2{
	width: 25%;
}
.hold .tag3{
	width: 28%;
	text-align: right;
}
.baddebt-content .total-content{
	background: var(--yellow1);
}
.baddebt-content .middle-content{
	min-height: 250px;
}
.baddebt-content .row-content>div span::before,
.baddebt-content .total-content>div span::before{
	content: 'RM ';
	font-size: 0.7em;
}
.baddebt-content .row-content{
	cursor: pointer;	
}
.baddebt-content .row-content:hover{
	background: var(--rowcolor);
}
.baddebt-content .total-content,
.baddebt-content .total-content:hover{
	cursor: inherit;
	background: var(--yellow1);
}

/*------------- loan full --------------*/
.year,
.month{
	list-style: none;
	margin: 0;
	padding: 0;
}
.month-content{
	display: none;
}
.year>li,
.year>a>li{
	padding: 0.4em 0 0 0;
	margin: 0;
	border-bottom: var(--bordercolor) 2px solid;
}
.year>li>h2,
.year>a>li>h2{
	font-size: 3em;
	margin: 0;
	padding: 0 0 0.15em 0;
	transition: color 0.15s;
	color: #999;
	letter-spacing: 0.04em;
	cursor: pointer;
	text-align: center;
}
.year>li:hover>h2,
.year>a>li:hover>h2{
	color: var(--fontcolor);
}
.year-link{
	font-size: 3em;
	margin: 0;
	padding-botton: 0.15em;
	transition: color 0.15s;
	color: #999;
	letter-spacing: 0.04em;
	text-align: center;
	font-weight: bold;
	border-bottom: var(--bordercolor) 2px solid;
}
.month>li{
	padding: 0.3em 0;
	margin: 0;
	border-top: var(--bordercolor) 2px solid;
	transition: background-color 0.2s;
}
.month>li>h2{
	font-size: 1.8em;
	margin: 0;
	padding: 0;
	transition: color 0.15s;
	color: #999;
	letter-spacing: 0.01em;
	cursor: pointer;
	text-align: center;
}
.month>li:hover>h2{
	color: var(--fontcolor);
}
.data-content{
	display: none;
}
.year>li>h2.expanded,
.month>li>h2.expanded{
	color: var(--fontcolor)
}
.data-content .tag-content{
	margin-top: 0.3em;
}
.data-content .subtotal,
.data-content .subtotal:hover{
	background-color: #e6e6e6;
	margin-bottom: 0.6em;
	cursor: inherit;
}

.loan-year .tag1{
	width: 13%;
}
.loan-year .tag2{
	width: 17%;
}
.currency-full{
	max-width: 100%;
}
.currency-year .tag1{
	width: 15%;
}
.currency-year .tag2{
	width: 37%;
}
.month .tag-content,
.month .row-content,
.month .total-content{
	text-align: left;
	/*cursor: inherit;*/
}
.month .row-content:hover{
	background-color: #eee;
}
.month .total-content,
.month .total-content:hover{
	background: #ddd;
}
.month .row-content:nth-last-child(1) div{
	border-bottom: none;
}
.grand-total{
	margin-bottom: 0.8em;
	border-top: var(--bordercolor) 2px solid;
}
.grand-total .tag-content{
	border-bottom: none;
}
.month-active{
	background-color: #f6f6f6;
}
.data-content-active{
	display: inherit;
}
.loan-content .subtotal .tag1{
	width: 25%;
}
.loan-content .subtotal .tag2{
	width: 5%;
}
.bet-content .subtotal .tag1{
	width: 20%;
}
.bet-content .subtotal .tag2{
	width: 2%;
}
.currency-content .subtotal .tag1{
	width: 45%;
}
.currency-content .subtotal .tag2{
	width: 7%;
}
.full-marking{
	background:#EDFFDC !important
}
.month .tag-content,
.month .row-content,
.grand-total .subtotal,
.grand-total .tag-content{
	padding: 0 0.5em !important;
}